Get access to an awe-inspiring collection Of 87 Beautiful Wordpress themes for the price of one Get it now Ad

8 Chrome DevTools hacks

Published: 17.12.2018 | Last update: 18.12.2018

We all, as developers, love a good hack. Better yet, we love being able to manipulate applications at our leisure. That’s why we’ve put together eight hacks for Chrome Developer Tools that can be a nice addition to your daily web-developer workflow.

What are Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

To open the Chrome Dev Tools, use Ctrl + Shift + i (Cmd + Shift + i on Mac) keyboard shortcut.

Before we get started, I would just like to quickly thank my friends at  for this guest post.

Ok, let's have a look at the first tip.

1. Quickly edit an HTML element

  • To edit an HTML element swiftly, select the Elements panel
  • Choose a DOM element within the Elements panel editor
  • double-click on the opening tag, and edit it.

​​​​​

  • When you finish your edits, the closing tag updates automatically

2. Change Developer tools position

Open Developer tools, open Menu by pressing the three dots icon and choose your Dev tools position

Dev tools on the right

Dev tools on the bottom

TIP: To quickly switch between your last two DevTools positions use Ctrl + Shift +D (CMD + Shift + D on Mac) keyboard shortcut. 

3. Material and custom colour palettes

Click on the switcher icon in front of the hex code, and you can choose from either page colours (this palette is automatically generated from your website) or material design (this palette automatically creates primary colours from the Material Design palette).

4. Copy image as data URI

For this hack, click the “Network” panel. 

Then, select your image within the “Resources” panel, right-click, and copy it as a Data URI (base64 encoded).

5. Column selection by dragging

Get started by selecting the “Sources” panel. Next, choose your file within the “Sources” panel editor. Last, hold “Alt” on your keyboard and drag the mouse accordingly.
 

6. Expand all child nodes

  • Select the “Elements” panel.
  • Choose a DOM element and Alt + Click the arrow within the Elements Panel editor to expand all child nodes.

7. DOM Search by CSS Selectors

CMD + F / CTRL + F and enter your class name or id name base search selector.

8. Long hover over a CSS selector to reveal the matching elements in the page

Go to the Elements > Styles tab. 

Then, when you hover over a CSS selector in DevTools, the matching elements will be highlighted on the page. 

Similarly, you can highlight the element also when you hover over a DOM node in the HTML source code in the same tab.

Conclusion

That's all for today. I hope at least some of these tips were useful or new to you and you will use them in your workflow.

This article was brought to you by .

Hi, I'm Ondrej, creator of Bootstrapious. I have published Bootstrap tutorials and freebies here since 2015.

Thanks for stopping by and have a great day ;)

Ondrej, Bootstrapious

You might also like one of my Free Templates

Italiano - Restaurant or Café Template

Italiano is my free Bootstrap 4 HTML responsive template. You can use it to build an elegant…

View template

Foliou - Bootstrap Portfolio
Premium

Foliou - Bootstrap Portfolio

Foliou is a responsive one-page Bootstrap 4 portfolio template. It presents your work in a…

View template

Bootstrap Blog

Bootstrap Blog is a free Bootstrap 4 blog template.  Its design is minimalistic, almost…

View template

Share on Facebook Share on Twitter Share on LinkedIn