Find solution
How to save ONLY the CSS changes of Styles panel of Chrome Developer Tools?

How can I improve my Chrome Developer Tools workflow, and can I accomplish this by removing the need for a mouse?

  • I am a front-end developer looking to remove the use of a mouse from my workflow. I can get browse, edit code, and use console no problem but I find it very difficult to inspect web pages using keyboard shortcuts. Do you know of anyone who operates Chrome Developer Tools without a mouse? Things specifically like navigating the Elements tab and transversing through nodes, finding specific classes, and turning on hover or altering their CSS. Should I memorize jQuery and access this all from the console? That may be easier.

  • Answer:

    One of my friends uses a mouse pretty minimally. I know just a couple shortcuts and it helps a lot. I'd recommend learning a couple and everytime you get annoyed learn the next one. Here is a list of shortcuts: https://developers.google.com/chrome-developer-tools/docs/shortcuts , they are of course different based on platform. A few useful ones: - CMD + Option + J = Open dev tools with console in focus - Esc (while in dev tools looking elsewhere) = open the console in addition to your current pane, hit escape again to make it go away - CMD + [ = change panels - CMD + f = find - Arrow keys in DOM inspector = traverse the DOM With the above commands you can pull up the console, go into the DOM inspector, search for an element, add a class, open the console, and attach a handler without touching your mouse! Side note: Chrome dev tools are insanely powerful. You should check out this free course on http://codeschool.com: https://www.codeschool.com/courses/discover-devtools

Parris Khachi at Quora Visit the source

Was this solution helpful to you?

Other answers

Here are a few ones I find myself using constantly on a daily basis: CMD + O = Search by file name. Opens up a search box on the Sources panel allowing you to search through all loaded files on the page. CTRL + G = Go to line (Sources panel) SHIFT + ? = Show settings dialog CMD + E = Start/Stop recording (Timeline panel) You can also pick up a lot of neat tricks from Paul Irish's http://www.youtube.com/user/paulirish. He is the Chrome Advocate focused on improving the Dev Tools.

Petar Bojinov

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.