JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Sneak Peek: Sencha Visual Studio Code Plugin

November 1, 2016 1495 Views
Show

We’re just days away from SenchaCon 2016, where we’ll be introducing a brand new Ext JS tool – a plugin for Microsoft Visual Studio Code source editor. Join Ryan Salva, Microsoft Principal Program Manager, and me for our session: Learn Cross-Platform Mobile App Development with Cordova and Visual Studio.

You’ll learn how you can use Visual Studio Code and Sencha Visual Studio Code plugin to speed up your Ext JS app development. We’ll cover the top features of Visual Studio Code, Sencha Visual Studio Code plugin, and use Microsoft extensions to create and debug mobile applications.

Don’t have your ticket yet for SenchaCon 2016? Register today because tomorrow is the last day for online registration.

Now, I’m going to show you how to debug Ext JS apps using Microsoft Visual Studio Code extension – Debugger for Chrome.

Debugging Ext JS Apps with Visual Studio Code

Debugging apps using breakpoints, stepping through code, and watching variables is very common in Java and .Net development environments, but good tools for web developers are limited. Microsoft Visual Studio Code provides an extension called “Debugger for Chrome” that helps you with debugging Ext JS web apps.

To get started, go to Visual Studio Code, and just search for and install “Debugger for Chrome” extension.

Visual Studio Code - Debugger for Chrome extension

From the Debug tab, select Configure, and select Chrome.

Visual Studio Code - Debug Tab

Visual Studio Code will now create an initial launch configuration. Please update the URL in the launch.json to point to your Ext JS app.

Visual Studio Code - Launch.json

Launch Chrome with remote debugging enabled, so the extension attaches to it. In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –remote-debugging-port=9222

Now, you can start debugging (F5), add breakpoints, step through Ext JS code, and watch the call stack.

Chrome with Remote Debugging Enabled

Join us at SenchaCon for our session, where we’ll show you all of the details and how to use Visual Studio Code plugin.

If you’re interested in what’s new in Architect 4.1 and Themer 1.1, I have another SenchaCon session, Web Development at the Speed of Thought: Succeeding in the App Economy, where I’ll go over speeding up development using various Ext JS tools including Architect, Themer, Sencha Inspector, and Stencils.

See you in Las Vegas!

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at