5 Epic Chrome DevTools Tricks For Web Developers

In this article, I'll show you five epic Google Chrome DevTools tricks that are essential for web developers!

1. Easy Screenshot

Gone are the days of installing a screen capture Chrome extension. Now, you can take a full-page screenshot thanks to Chome DevTools. The screenshot is not limited to the browser’s viewport—you can capture the entire web page, from the header to the footer.

How To: Right-click on any page element and select Inspect Element. Open the command menu (⌘ + Shift + P on a Mac)  ( ^ + Shift + P on a PC). Type “screenshot” and select “Capture full-size screenshot”. DevTools will then download a PNG screenshot of the entire webpage.

2. Block Request URLs

Ever wanted to see what your website would look like without a certain CSS file or if a certain script fails to load on your website? Thanks to the Block Request URL feature in DevTools, you can block a specific URL to simulate DOM failures.

How To: Right-click on any page element and select Inspect Element. Open the Network panel, right-click on a request > select Block Request URL.

3. Unified Command Menu

Chrome DevTools now comes with a handy unified command menu where you can run various pre-defined commands. All commands start with the greater-than symbol (>). If you would like to see other commands that you can perform, type “?” to reveal a list of additional commands.

How To: Right-click on any page element and select Inspect Element. Open the command menu(⌘ + Shift + P on a Mac)  ( ^ + Shift + P on a PC).

4. Web Page Audits

In Chrome, you can now measure the quality of your web pages using the new “Audits” tab. An audit provides various scores for progressive web apps, performance, accessibility and best practices.

How To: Right-click on any page element and select Inspect Element. Go to the “Audits” tab > Select “Perform an audit“.

5. Code Unminifier

It’s always in good practice to keep your code minified to help speed up page loading time. However, compressed code is hard to read and virtually impossible to work with. If you ever want to quickly tweak your minified code in Chrome, you can simply click the “format” button to unminify code.

How To: Right-click on any page element and select Inspect Element. Go to the “Sources” tab > Select “format” button.

 

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL