Is there any way to enable cold folding in the CodeMirror used in the sources panel of Chrome Dev Tools.
Normally you would enable this through an option
foldGutter: true
I can see that the options for CodeMirror are being handled via source_frame_module.js.
Is it possible to customize this file?
Currently you cannot modify anything about how CodeMirror in DevTools operates. The only thing that can be done is re-styling via a custom theme extension. There have been numerous bug reports asking for this kind of functionality, but due to security reasons it hasn't been acted on yet nor is planned to be as far as I know.
Related
I've been using PhpStorm for awhile, for PHP as well as JS. I would love, however, to switch to VSCode since it's lighter, open source and free. But one feature that I cannot quite carry over with extensions is Code Style settings.
PhpStorm has a sweet visual interface in settings that allows you to set up detailed code style rules with live examples right there. ESLint, unfortunately, doesn't have anything similar - it's all text rules (which is a drag and takes forever to set up).
So I'm wondering if there's any way at all to export PhpStorm code style settings as ESLint rules? Or if there's an app that has a similar interface to set up ESLint? Or maybe there's a VScode extension that I am missing that has a similar interface?
Is it possible to use the supper handy (hjkl, A, $, vi, etc) inside Chrome DevTools?
More precisely the source panel and console?
I'm using Vimium, which is great, but when doing web dev in the Chrome DevTools I can't use any vi action.
Developer Advocate for DevTools here. This is not currently possible. Open a bug if you want this feature. Please link to the bug if you open one, so that others can star it and comment on it. I'd recommend scoping it to the Sources panel, only. Otherwise it'd probably be too big of an undertaking.
There are still no vim keybindings available in the Chrome Dev Tools settings, in the opposite to the Firefox Developer Tools, where you currently can choose between standard, emacs, vim and sublime text keybindings out of the box.
However, there is some node.js solution, which allows to remote control the Chrome Dev Tools from neovim, see vim-chrome-devtools. It may serve as an alternative until Google perhaps some day provides Vim support.
By the way, I thought, Bram Moolenaar, the Developer of Vim, is still hired by Google? ...
Vimium - The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.
here
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 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'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.