I’ve been working with Chrome for over a decade now, long before Mozilla managed to fix their memory leak issues. And, as someone who does front-end development on a daily basis, I’ve also been an avid user of the Chrome DevTools. Whether it’s to do the most basic form of inspecting CSS or doing performance tests, DevTools is an indispensable part of my routine as a developer. And over the years I have both learned but also collected various tips and tricks, some of which aren’t exactly clear-cut. If you want a refresher on everything that DevTools can do, I recommend referencing . But more importantly, the page, since that’s where you’ll get all the new features and tools at a glance. the official documentation What’s New in DevTools #1: Block resources to render site without CSS/JavaScript We take JavaScript for granted, but there are in their browser, with most doing for reasons relating to accessibility, privacy, and security. plenty of people who block JS And you also have to consider cases where JS/CSS might not be accessible due to network problems, or the browser failing to fetch a particular resource. So, what does your website look like when a particular file/library is blocked? Open up DevTools and go to the tab. Network Reload the page you’re on to fetch all the resources. Click on any resource and select . Block resource URL Refresh the page again to see the result. I do believe this also works inside Firefox and Edge developer tools. #2: CSS Changes at a glance (with Export) Have you ever gotten carried away with changing CSS from DevTools only to realize you now have to backtrack to 10 different properties to save those changes? Yep. Been there, done that. Thankfully, there is a better way to tackle this problem. Go to . Customize and control DevTools -> More tools Select . Changes A permanent tab will appear inside DevTools showcasing code changes you’ve made. The Changes panel can also be accessed through shortcuts and then typing in Changes in the Run console. At the bottom of the Changes interface, you have a button, which can be used to directly export all the changes you made in that session. CTRL/CMD+Shift+P Copy #3: Change Grid & Flexbox layout structure I recently wrote an article on some of the best , so this next tip goes hand in hand with that article. First, any container which is supported by either or , and then look for the allocated property that has or vice-versa. CSS layout generators Inspect Grid Flexbox display: flex; Next to the property, you’ll see a small clickable icon (the editor) – clicking on this will open up a panel from within which you can use positioning properties as specified in Grid or Flexbox. This feature is useful when you want to test a new layout alignment in real-time. There’s also a thing called , for which the Chrome dev team has done a write-up. CSS Grid Inspector #4: Debugging accessibility with in-built tools Accessibility is very much a hot topic in front-end developer circles. So much so that the majority of come pre-built with accessibility best practices. CMS , and have begun to implement features that prioritize design inclusivity. And DevTools is no exception to the rule. component libraries and UI kits platforms like WordPress have also embraced accessibility » Enabling accessibility tree in Chrome DevTools After you select the checkbox, you’ll need to reload your DevTools. At this stage, you’ll have an accessibility icon on the top-right corner in the Elements window. Clicking this icon will reveal the entire site’s structure in a DOM tree view. Then you can inspect individual site sections and elements and see whether they have had an ARIA label assigned to them. enable » Source Order Viewer On the same panel as shown in the GIF above there is another checkbox. And that checkbox is called . What this does – once enabled – is it lets you see the order in which elements appear for visitors who might visit your pages using assistive tools. Show source order Once enabled, you can select any area of your page and see the order in which items will appear. This is particularly useful when working with either Grid or Flexbox, both of which have properties for rearranging the display order of items. E.g. order: 1; » Color suggestions for low contrast text Color contrast is one of the major accessibility issues, even for people who aren’t necessarily suffering from serious visual impairments. I’ve had cases where my vision was starting to get worse and I needed to get a new prescription for my glasses, and the thing that gave it away was low/high contrast colors making my eyes weary. White on red, green on blue, etc. The on how the following method works. web.dev team have done an entire writeup This method works for any on-page element. Even if you think that the contrast is fine, the algorithm can make subtle suggestions to improve overall contrast visibility. Contrast ratio #5: Format minified JavaScript/CSS into readable code It only takes a few seconds to import minified code into VS Code and then apply Prettier, but why bother when you can format (unminify) directly from the DevTools console. To make this work: Open the panel inside DevTools. Sources Open any file that’s been minified. Click on the icon at the bottom of the console. { } The code is now formatted. #6: Editing (text) and removing elements with designMode is part of the Web API specification and enables you to directly edit on-page elements, although with some limitations. For example, only text can be edited, but any other element can be removed entirely. Keep in mind this isn’t an “official” feature, but it is nonetheless useful when working with things like and other text-specific properties. designMode CSS math functions To try it yourself: Open up the DevTools . Console Type and submit. document.designMode=”on” Go back to the page and start editing. The property is also applicable when you want to disable designMode. And in case you didn’t notice in the GIF, this works great for doing spellchecks of your on-page content, too. off #7: Capture screenshots from the Device Emulator This is a feature that had eluded me for the longest time. My usual workflow for taking screenshots is either Snip or Awesome Screenshot extension. As it turns out, you can capture Mobile/Tablet and other resolution screenshots directly from the Device Emulator. But, that’s not the only reason this feature is useful. You can in fact . Before I get into more details, here is an example: capture screenshots including the device frame So, how do you enable the device frame for mobile/tablet screenshots? Open DevTools. Click on the icon. Toggle device toolbar Navigate to (three dots). top-right menu icon Select . Show device frame Here is a visual preview: The problem is, even if you click the button the device frame doesn’t show. And this is because only a handful of devices have the frame displayed. In fact, you will need to manually enable these devices from the menu available in . These device types have a frame: Dimensions -> Edit iPhone 5/SE iPhone 6/7/8 & Plus Nexus 5 & 5x Nexus 6P iPad Thanks to for the clarification. StackOverflow user RoCk RoCk #8: Select colors from outside the browser This is one of the more recent features added to DevTools. Assuming you’re already familiar with the – it is now possible to pick colors that aren’t inside the browser. In other words, you can select colors directly from your desktop, whether it’s an image or a specific icon. Color Picker Now you can grab the colors from your favorite photos even quicker. #9: Use copy() as a pseudo-scraper The function can be used to mass-fetch objects found on the page. For me, this is the quickest way to quickly scrape all the URLs found on a page. copy() In your type: Console copy($$('a').map(a => a.href).join('\n')) And the result is: The alternative JavaScript function would look like this: var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array) #10: How to change the Chrome DevTools color theme I wonder how many devs have changed their Chrome browser theme to dark but didn’t realize you have to do it separately for DevTools. I’m sure there have been a fair few. With DevTools open you can press to open settings. This will open the default Preferences panel where you can choose from Light or Dark theme, or use System Preferences. F1 A glimpse inside a development powerhouse This is by no means an exhaustive list of everything that DevTools can do. And over time I hope to add more interesting tricks that I come across. I hope that at least one or two of these tips were interesting enough for you to add to your notes. And if not, check back later! Also published . here

Fetch

Google

Mozilla

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build Your Own JavaScript Library to Detect Mobile Browsers

10 Must Have Chrome Extensions for a Web Developer

9 Chrome Extensions To Make Your Life Easier

A Guide to Creating True Cross-Browser Extensions

Browser Extensions: Taking Back What’s Yours

Build Your Own JavaScript Library to Detect Mobile Browsers

10 Must Have Chrome Extensions for a Web Developer

9 Chrome Extensions To Make Your Life Easier

A Guide to Creating True Cross-Browser Extensions

Browser Extensions: Taking Back What’s Yours

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps