Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Vim keybinding inside Chrome DevTools

Tags:

google-chrome-devtools

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.

like image 818
Tiago Pires Avatar asked Sep 16 '15 03:09

Tiago Pires

People also ask

How do I debug in DevTools?

Open your Chromium-based browser (Edge, Chrome, etc.) and press F12 to open DevTools. Pop out the DevTools in their own window by going to the ... menu at the top right and choosing "Undock into separate window," which is the first icon in the Dock side options.

How do I see layers in Google Chrome dev tools?

Fortunately, there is a tool that makes repaints spotting easier — Layers panel in Chrome Dev Tools. To reveal the panel you need to open a customisation menu in Chrome Dev Tools and in “More Tools” choose “Layers” option.

How do I use DevTools profiler on Chrome?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.

How do I run a script in DevTools?

DevTools opens. Or, press Ctrl + Shift + J (Windows, Linux) or Command + Option + J (macOS), to directly open the DevTools console. If necessary, click in DevTools to give it focus, and then press Esc to open the Console. Click in the Console, and then type 2+2 , without pressing Enter .

2 Answers

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.

like image 86
Kayce Basques Avatar answered Sep 30 '22 02:09

Kayce Basques

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? ...

like image 37
Andi Hafner Avatar answered Sep 30 '22 02:09

Andi Hafner
Sign in to Comment

Related questions

How to show traffic from specific domain in Chrome Dev Tools
How to login in Puppeteer?
In Chrome what is screen_capture_injected?
Deferred long-running timer task(s) to improve scrolling smoothness
Chrome 'paused in debugger' issue
Chrome's map to file system resource not working after update
Why doesn't debugger stop at breakpoint?
How to get CSS selectors to work in the Developer Tools for Chrome 17?
Auto-scrolling Chrome's DevTools console
Is it possible to blackbox all VM scripts in chrome debugger?
Website response time: Difference between `Load` and `Finish`
Word wrap in Chrome Dev Tools?
Chrome DevTools: jump from XHR network request, to the code that made it
How to debug chrome devtools panel extension?
React tab doesn't appear in chrome developer tools
Chrome extensions - Other ways to read response bodies than chrome.devtools.network?
What's causing this excessive "Composite Layers", "Recalculate Style" and "Update Layer Tree" cycle?
Big source / minified files make Chrome Developer Tools freeze
How to pretty print log output in Chrome DevTools Console?
Is it possible to view jQuery added data in Chrome

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!