Easier browser debugging with Developer Tools integration in Visual Studio Code

Windows

Windows
If you're debugging JavaScript in
Please, Log in or Register to view URLs content!
you probably have used either the
Please, Log in or Register to view URLs content!
or the
Please, Log in or Register to view URLs content!
. Neither are necessary any longer to debug as JavaScript debugging is now built-in to Visual Studio Code. This does not only mean that you can uninstall these extensions, but we also made debugging more convenient. To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting "Run and debug". Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command. From there on you can choose to debug in Chrome, Edge or Node.js without having to install any extensions.
Please, Log in or Register to view URLs content!
If you choose Edge, you'll notice an extra feature in the debug toolbar: an inspect button.
Please, Log in or Register to view URLs content!
This button launches the Edge Developer Tools right inside your Visual Studio Code instance. The first time you activate this button, the editor will ask you to install the
Please, Log in or Register to view URLs content!
extension. Once you have this one installed you won't be prompted again.
Please, Log in or Register to view URLs content!
You can then inspect the DOM, change CSS, and see network requests of your project running in the browser without leaving Visual Studio Code.
Please, Log in or Register to view URLs content!
As a bonus, you can also use the Debug Console in the editor to interact with the document in the browser, much like you would with the
Please, Log in or Register to view URLs content!
in the browser developer tools. You have full access to the window object and can use the
Please, Log in or Register to view URLs content!
.
Please, Log in or Register to view URLs content!
If you want to automatically attach to Microsoft Edge and launch the Developer Tools in the editor, you can create a
Please, Log in or Register to view URLs content!
file. Notice that `
Please, Log in or Register to view URLs content!
` probably needs to be changed for your project.
{
"version": "0.2.0",
"configurations": [
{
"type": "vscode-edge-devtools.debug",
"request": "launch",
"name": "Launch Microsoft Edge and open the Edge DevTools",
"url": "
Please, Log in or Register to view URLs content!
",
"webRoot": "${workspaceFolder}"
}
]
}
If you want to take a deep-dive into the features of the built-in JavaScript debugging workflow of Visual Studio Code, you can check the
Please, Log in or Register to view URLs content!
. We hope that by automatically including the option to debug with browsers into Visual Studio Code we made the process easier to get started and would love to learn what else we can do to make you more effective in your debugging journey. Send feedback (Alt-Shift-I with the DevTools open) or
Please, Log in or Register to view URLs content!
to let us know what you think!

Please, Log in or Register to view URLs content!
 

Users who are viewing this thread

Top