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
Related
I use the Chrome DevTools to edit my large JavaScript file.
Is there a way to set Bookmarks in the code like in Visual Studio (see the hotkeys on https://stackoverflow.com/a/926065 or even better https://stackoverflow.com/a/38419034)?
Interesting! No, DevTools doesn't have official support for this one. I filed a feature request: https://crbug.com/963682
Update
We don't have official support for this feature, but there is a workaround.
Use a line-of-code breakpoint as your "bookmark".
Disable that breakpoint from the Breakpoints pane.
Click the preview to jump to that line of code.
P.S. I tweeted this workaround idea. Thank you for the inspiration.
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.
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.
In bash, I use the history-search-forward and history-search-backward feature to allow me to type in a few characters of the command I want to run, then press up arrow to cycle through items in my history that match those characters.
I want the same thing for the chrome devtool console. I often use up arrow to cycle through my history, but there doesn't seem to be a way to filter it. Does anybody have a clever solution?
[Just a note that command history matching has improved a lot in recent versions of Chrome. It's not exactly how I would like it, but it's pretty good.]
Reverse search feature is not there in Chrome developer tools. I have logged a request for the reverse search feature. Please star the same.
http://code.google.com/p/chromium/issues/detail?id=171386
I use Snippets (Chrome Developer Tools: What is Snippets Support?) for keeping track of all my commands.
Try this: (based on How to remove all recent console command)
Open Chrome Dev Tools on the Chrome Dev Tools window (as per post above) by following steps 1-3 on the first answer (by Rob W). Don't do step 4 or you'll wipe out your history!
Run this command in the new Dev Tools console: JSON.parse(localStorage.getItem('consoleHistory')).filter(function(item){ return ~item.indexOf('indexedDB');})
Replace "indexedDB" with whatever it is you want to filter on.
TL;DR
Chrome Dev Tools is technically just another browser window.
The LocalStorage of the original Dev Tools is for the site you are browsing.
By opening Dev Tools on the Dev Tools, gives you the LocalStorage for the Dev Tools window and thus gives you access to the consoleHistory.
localStorage.getItem('consoleHistory') gives you a string of an Array, so you need to parse it (i.e. JSON.parse()) back into an Array so you can filter it.
The ~ in front of ~item.indexOf('indexedDB') is a bitwise shortcut for item.indexOf('indexedDB') > 0
Adding my 2 cents since the most upvoted answer has stopped working.
Chrome does not have a bash-like search yet (Ctrl + R) but recent versions of Chrome have history autocomplete. Start typing a command and it will show suggestions from the history (just below the usual syntax suggestions). This is not exactly "search", but good enough for "starts with" type of filtering.
Works in all Chromium browsers including MS Edge
When you open the console of the devTools and clicking on the up-arrow (or the down-arrow) you will start cycle through your 'history' of commands.