In Chrome Developer Tools, in the source tab when you run snippets with the Run button or Ctrl+Enter, devtools does auto focus to the console tab, so I cannot continue to do coding on the source tab efficiently. I googled about the solution and took a look the devtools preference but couldn't find a good resource. Thanks.
Related
Can anyone explain these three debug symbols on VSCode I have found on the internet?
My vs code has the one with the play icon.
All demos online on debugging have the one in the middle. How do I get that?
Also, node js debugging is installed but I think it shows as disabled, with no option I can find to enable it.
To answer your question directly [TL;DR]: you already have it if you are using the latest version of vscode. It will take you to the same view as the one on the right
If you look at the codicon libray ref the middle one you pointed out is not present.
Visual Studio Code made changes in February 2020 ref that incorporates running and debugging to be something more harmonious:
User studies revealed that new users have difficulties finding how to run their programs in VS Code. One reason is that the existing "Debugging" functionality is not something that they relate to "Running" a program. For that reason, we are making "Run" more prominent in the UI.
The main menu Debug has become the Run menu.
The Run and Debug view has become the Run view and the corresponding Activity Bar icon now shows a large "Play" icon with a small "bug" decoration.
So in other words, there is no difference. The 'Run' and 'Debug' view is synonymous and the icon reflects those changes. As they noted, the Debug view is now called the 'Run' view, but it still offers debugging and breakpoints.
There are 2 possibilities you are running into however:
The tutorials and guides you are using are out-dated (showing an outdated version of vscode)
The tutorial or guide is using an extension that offers debugging capabilities. Extensions have some control over the icon you see
The extension is for single file debugging, according to the June 2020 ref notes, vscode recommends the following:
For debug extensions that want to improve the single file debug experience by adding a "Run" and/or "Debug" button to the editor, we recommend following these guidelines for a consistent look and feel:
Contribute Run and/or Debug commands in the package.json (see Mock Debug):
Use the command titles "Run File"/"Debug File" or "Run Python File"/"Debug Python File".
Use the $(play) icon for Run and $(debug-alt-small) for Debug.
Where their codicon library was updated in June to reflect the following:
As you can see, none of them are prefixed with verbiage like 'run', but they all represent the same functionality.
Additionally, you may see this icon as well:
This represents the panel (view) where the output of your debug will go.
I am building a chrome extension that is listening to messages coming from Chrome Dev Tools.
We are building a CI system and want to automate the following process:
Open DevTools and go to Elements pane.
Select node (see attached image - chrome1.png)
Select the Accessibility pane (see attached image - chrome2.png)
Are the above interactions possible using Puppeteer? My other option is to use Sikuli (http://www.sikuli.org/), although Puppeteer seems to be the right way to do things
-anurag
Doesn't appear to work. Here's my attempt:
https://glitch.com/edit/#!/puppeteer-open-console?path=server.js:25:3
Update
This prototype is just a test to see if you can open DevTools by triggering one of its keyboard shortcuts: Control+Shift+J. This doesn't appear to work.
However, one of the Puppeteer owners just told me that you can pass the devtools:true argument to puppeteer.launch() and that will enable you to open DevTools. Haven't tried it myself. He's not sure whether you can automate DevTools actions via Puppeteer. You might be able to get a reference to the DevTools window via browser.targets().
I am using Visual Studio Code in Mac to do web programming.
I see we could use shift+cmd+v to launch a preview and cmd+k v to launch a preview in a separate window.
But once we modify code and save it, does anyone know how to reload and update the preview (by shortcut by preference)? Additionally, is it possible to automate the updates?
Moreover, I have opened the Debug panel, once I click on the green button, it lets me Select Environment:
Does anyone know which one I should choose to debug client side HTML+JavaScript programs?
1.) The "Preview" you mention is for Markdown files. Its not supposed to render a proper HTML preview, that's why it doesn't work or refresh. As soon as you use it with Markdown files, it updates / refreshes as you type.
But there are a couple of HTML preview extensions in the marketplace, just search for "HTML Preview" and you should be able to find some.
2.) None of those options in your screenshot, VSCode does not ship with a client side debugger by default.
But you can install Debugger for Chrome which uses Chromes debugging protocol. Detailed instructions on how to use it are in the extensions README.
Checking the list
https://developers.google.com/chrome-developer-tools/docs/shortcuts?csw=1#sources-panel
I cannot find any way to navigate through the source files inside Chrome Dev Tools. Anyone with an idea how to switch source files without using the mouse?
Ctrl-P / Ctrl-O shortcut will bring up a Goto-Source dialog.
To my knowledge there is no keyboard shortcut for doing this. I would know since I have recently updated that page multiple times to add or change some shortcuts.
I'm pretty sure there's no command you can configure either.
I'd suggest opening a ticket for it if you would like to see this added.
I love chrome dev tool, it has been a huge productivity boost for me. I would love to find out if there is any plugin or way to get it to do auto-complete on javascript object (intelisense) and syntax highlighting in live edit mode? In the console you can press tab to complete a javascript object, property or method, but that does not seem to be available in live edit mode.
Thanks!
Auto-completion in the CodeMirror editor (should be enabled in the Settings) was landed yesterday behind a DevTools experiment "Enable text editor autocompletion" and should appear in the next Chrome Canary.
Regarding the syntax highlight, I'm not quite sure what your case is, since we always highlight JavaScript sources.