Tech

5 Epic Chrome DevTools Tricks 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.

 

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments