Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

How to use vscode devtools for google chrome?


Asked by Everly Chavez on Dec 04, 2021 Chrome A guide to developing tools



VSCode DevTools for Chrome A VSCode extension to host the chrome devtools inside of a webview. If you are looking for a more streamlined and officially supported devtools extension, you should try VS Code - Elements for Microsoft Edge (Chromium) Attaching to a running chrome instance:
Keeping this in consideration,
Open the debug tab by clicking on the icon that looks like a bug: With this pane open, you will see similar tools to what we saw in Chrome: variables, watch, call stack, and breakpoints. The majority of the functionality that you get in Chrome DevTools is available right here inside of VS Code.
Thereof, Our Chrome Debugger allows front-end developers to debug their client-side JavaScript code running inside Google Chrome directly from Visual Studio Code. Our debugger works by connecting to Chrome over its Chrome Debugger protocol, where we map files loaded in the browser to the files open in Visual Studio Code.
Consequently,
VSCode DevTools for Chrome A VSCode extension to host the chrome devtools inside of a webview. If you are looking for a more streamlined and officially supported devtools extension, you should try VS Code - Elements for Microsoft Edge (Chromium) Attaching to a running chrome instance:
Also Know,
For now, Chrome needs to be started with remote debugging enabled, and only supports one concurrent connection. This means if you open up DevTools inside Chrome, the connection to VS Code will get terminated by Chrome.