A moment ago I had minimized VSCode but then accidentally pressed some set of keys. VSCode popped up and displayed a standard Javascript debug console on the right side. While this may very well be an error and VSCode does not intend to expose this console, it's very interesting and I'd love to use it.
Is this an expose feature of VSCode? Is it a legitimate "secret" feature? In either case, how can you access it?
There is a little console available under the F12 short-cut that has DOM / Styles / Event Listeners and the like.
It is pretty analogous to browser tools.
The main purpose of it is that it exposes the "under the hood" editor - as that is the web page that it is inspecting.
Related
I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.
I am learning web development and make use of chrome devTools a lot. However on "console" I want to disable autocompletion feature, e.g. when I type window.locat.. then it automatically gives me hint about window.location. I want that to be disabled since I feel while learning it is good not to get prompts in order to remember all the properties of objects.
Any idea how to do it?
Help is appreciated!
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.
I find myself typing JavaScript in the console a lot. For example, I quickly want to see the result if I change the property of a certain object. However every time that I refresh the page I have to redefine my variables, etc. I do this by using the up-key, so I do not have to retype, but this costs a lot of time. What is a better way?
The ultimate coolness would be an environment like Sublime Text in which you can write multi line code and from there execute it directly in the browser... And then still have the autocomplete list of all the methods of an object (like in the console). Obviously this is not available, but I am very interesting in the workflow of other when typing JavaScript code in the console.
In Chrome 24's Sources panel, use the Snippets tab. Right-click in the left (blank) tree and choose New from the context menu.
I'm using Google Chrome Developers tool and console while developing and debugging my web applications.
I've some Chrome plugins/extensions installed. These plugins/extensions add extra markups and scripts in the pages while rendering them in the browser, and when I view my codes in the developers tool, makes it a lot messy.
I want a clean way to view my codes without those extra markups.
So is there a way to toggle (disable/enable) the plugins quickly, or in the best way, to disable them in a particular tab? I've several plugins/extensions installed and I don't think it's a good idea to disable and then re-enable them manually.
Besides, I may want to use a plugin/extension while I'm browsing other websites on other tabs simultaneously.
There's no mechanism to disable an extension for a specific tab, or specific host. You could hack something together via the management API that would disable extensions when you hit a specific URL, but that disabled state would be global, not local.
Extensions don't, however, run in Incognito mode (unless you explicitly whitelist them via a checkbox at chrome://extensions): that might be a decent workaround for you. Load your in-development site in Incognito, work with it there in a clean environment, and pop back into your regular window for normal browsing.
You could, of course, accomplish the same thing by setting up a specific profile for development in which you simply didn't install extensions.
These are workarounds, of course. You should feel free to file a feature request for more granular user-side control over when extensions are loaded: http://new.crbug.com/
Would running 2 separate instances of Chrome be of help for you?
(You can start 2 unrelated Chrome browser instances from a command line specifying different user directories: chrome --user-data-dir=userdata1 & chrome --user-data-dir=userdata2 )
I haven't tried it for your usecase, but it sounds reasonable.