{"id":21881,"date":"2019-12-11T10:12:06","date_gmt":"2019-12-11T10:12:06","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21881"},"modified":"2019-12-11T10:12:06","modified_gmt":"2019-12-11T10:12:06","slug":"30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/","title":{"rendered":"30 DevTools resources to help you get the most out of Firefox and Chrome"},"content":{"rendered":"<p>DevTools are powerful sets of web developer tools built directly into major web browsers. They help you edit websites on-the-fly and quickly diagnose problems. You can manipulate DOM elements, gauge performance and debug JavaScript \u2014 all from within the browser window in real time. DevTools have become essential to web development, and new tools are being added all the time.<\/p>\n<p>In this article, we\u2019ll focus on Firefox and Google Chrome\u2019s DevTools, as they tend to be the choice for most professional developers. As DevTools now also include plenty of features for web designers and front-end developers to edit things visually, we especially look at CSS, animation and layouts before digging into performance. We also cover accessibility, debugging TypeScript applications and cutting-edge automation techniques. Most of the resources are must-read articles to bookmark, and at the end we also round up some useful books, newsletters, and video channels to help you master DevTools.<\/p>\n<p>Let\u2019s get started!<\/p>\n<h2>DevTools for designers<\/h2>\n<p><strong><a href=\"https:\/\/css-tricks.com\/using-devtools-to-improve-the-ux-design-to-development-process\/\">Using DevTools to Improve the UX Design to Development Process<\/a><\/strong><\/p>\n<p>Lisa Tweedie describes how DevTools can be a designer\u2019s best friend. She goes over various features and what impact they\u2019ve had on her work as a UX designer and also recommends a few Chrome extensions.<\/p>\n<p><strong><a href=\"https:\/\/css-tricks.com\/devtools-for-designers\/\">DevTools for Designers<\/a><\/strong><\/p>\n<p>An interesting discussion about in-browser tooling that could help web designers do their job. CSS-Tricks rounds up perspectives from a wide array of people and companies who have shared thoughts on this topic. For example, you can the shape path editor in Firefox can be used to explore interesting designs:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/311768602\" width=\"640\" height=\"511\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><a href=\"https:\/\/vimeo.com\/311768602\">Morphing with clip-paths<\/a> from <a href=\"https:\/\/vimeo.com\/user82698607\">Mikael Ainalem<\/a> on <a href=\"https:\/\/vimeo.com\">Vimeo<\/a>.<\/p>\n<h2>Overviews and CSS<\/h2>\n<p><strong><a href=\"https:\/\/www.heartinternet.uk\/blog\/16-devtools-tips-and-tricks-every-css-developer-need-to-know\/\">16 DevTools Tips and Tricks Every CSS Developer Needs to Know<\/a><\/strong><\/p>\n<p>In this article here on the Heart Internet blog, Louis Lazaris compiles a number of CSS-related features and tricks available via developer tools that will take your CSS development to a new level. Most are based on Chrome\u2019s DevTools, but there are also a few Firefox tips.<\/p>\n<p><strong><a href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/guide-new-experimental-css-devtools-firefox\/\">A Guide to New and Experimental CSS DevTools in Firefox<\/a><\/strong><\/p>\n<p>Over at Smashing Magazine, Victoria Wang, a UX designer at Mozilla, runs through seven tools (including Grid Inspector) the Layout Tools team has come up with to help solve the problems of the modern web, with stories from the design process and practical steps for trying out each tool, and takes a peek at potential future projects.<\/p>\n<p><strong><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/firefox-developer-tools-roundup--cms-32821\">14 Firefox Developer Tools You Might Not Know About<\/a><\/strong><\/p>\n<p>A roundup of some of the excellent tools Firefox has in its collection of Developer Tools. Tools covered include fonts and accessibility inspectors, a shape editing tool, a CSS filters editor, a CSS transform visualiser, an inbuilt eyedropper, and lots more.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/S36N8RGdY2U\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong><a href=\"https:\/\/loftie.com\/post\/things-you-may-not-know-about-chrome-devtools\/\">Things You May Not Know About Chrome DevTools<\/a><\/strong><\/p>\n<p>Developer Loftie Ellis uses Chrome DevTools pretty much daily, but there are a few things he wishes he knew earlier. Here he rounds up 10 quick-fire features you may not have stumbled across, including easily getting a reference to any inspected element and creating live expressions pinned to your console. Also check out <a href=\"https:\/\/www.telerik.com\/blogs\/10-chrome-developer-tool-features-you-may-have-missed\">10 Chrome Developer Tool Features You May Have Missed<\/a>.<\/p>\n<p><strong><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/find-out-why-your-css-isnt-working--cms-33472\">Find Out Why Your CSS isn\u2019t Working! New Firefox DevTools Features<\/a><\/strong><\/p>\n<p>In this article you\u2019ll learn how to use two new features available in Firefox DevTools to help you find out what\u2019s wrong with your CSS: the new \u201cinactive CSS\u201d messages and how to list all elements related to a CSS warning with the console. At the end you\u2019ll also get a peek at some recently added functionality.<\/p>\n<p><strong><a href=\"https:\/\/blog.logrocket.com\/firefox-devtools-for-css-authors-1511f41d1e3\/\">Firefox DevTools for CSS Authors<\/a><\/strong><\/p>\n<p>A tutorial on how DevTools can help with your CSS authoring and inspecting in the browser. The 11 topics covered in the article include the Shape Path editor, CSS filters, the Responsive Design Mode, working with preprocessors, and much more.<\/p>\n<p><strong><a href=\"https:\/\/blog.bitsrc.io\/8-little-videos-about-the-firefox-shape-path-editor-96a12c7cd3b6\">8 Little Videos About the Firefox Shape Path Editor<\/a><\/strong><\/p>\n<p>The Shape Path editor in Firefox DevTools is very useful if you want to create clipping paths and shape-outside effects. This article explains what you can do with it and visualises it with the help of some short videos.<\/p>\n<p><strong><a href=\"https:\/\/www.chenhuijing.com\/blog\/devtools-for-understanding-modern-layout-techniques\/\">Using DevTools to Understand Modern CSS Layout Techniques<\/a><\/strong><\/p>\n<p>Chen Hui Jing explains a variety of modern CSS layout techniques and concepts \u2014 such as Flexbox, Grid and Box Alignment \u2014 with the help of DevTools. She provides real-world use cases of how such techniques allow designs to better adapt across a broad range of viewports. Also watch her accompanying talk featuring live demonstrations:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/9lGyfc2q1VM\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong><a href=\"https:\/\/scotch.io\/tutorials\/debugging-css-grid-with-firefox-dev-tools\">Debugging CSS Grid with Firefox DevTools<\/a><\/strong><\/p>\n<p>Developer advocate Chris Nwamba looks at a few ways you can debug CSS Grid by using the inbuilt developer tools in Firefox. You\u2019ll build a demo CSS Grid app that displays a grid of cat images and then walk through the debug processes step by step.<\/p>\n<p><strong><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/quick-tip-chrome-animation-dev-tools--cms-31505\">How to Use the Animation Inspector in Chrome DevTools<\/a><\/strong><\/p>\n<p>In this post, you\u2019ll learn which animation dev tools are available in Chrome, how to access them, and what they can do for you. These tools can provide much needed insight into your animations, as well as real time feedback, to help you make them look just right.<\/p>\n<h2>Web performance<\/h2>\n<p><strong><a href=\"https:\/\/www.viget.com\/articles\/animation-performance-101-measuring-with-dev-tools\/\">Animation Performance 101: Measuring with Dev Tools<\/a><\/strong><\/p>\n<p>Learn how to measure and diagnose performance bottlenecks in web animations with Chrome DevTools. Also check out <a href=\"https:\/\/www.viget.com\/articles\/animation-performance-101-browser-under-the-hood\/\">part 1<\/a> of this ultimate guide to animation performance, which covers how the browser renders elements and what you should and shouldn\u2019t animate, and <a href=\"https:\/\/www.viget.com\/articles\/animation-performance-101-optimizing-javascript\/\">part 2<\/a>, which covers how to optimise JavaScript.<\/p>\n<p><strong><a href=\"https:\/\/calibreapp.com\/blog\/investigate-animation-performance-with-devtools\/\">Investigate Animation Performance with DevTools<\/a><\/strong><\/p>\n<p>In this post by Milica Mihajlija on the blog of web performance monitoring tool <a href=\"https:\/\/calibreapp.com\/\">Calibre<\/a> you\u2019ll learn how browser rendering works and how to navigate DevTools to diagnose animation performance issues. It uses Chrome DevTools, but other browsers have very similar features and the high-level concepts are the same everywhere.<\/p>\n<p><strong><a href=\"https:\/\/web.dev\/long-tasks-devtools\/\">Are Long JavaScript Tasks Delaying Your Time to Interactive?<\/a><\/strong><\/p>\n<p>Chrome DevTools can now visualise \u2018Long Tasks\u2019 (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimise away any problems. Performance expert Addy Osmani, an engineering manager on the Google Chrome team, explains how to diagnose costly work preventing user interaction.<\/p>\n<p><strong><a href=\"https:\/\/csswizardry.com\/2019\/08\/making-cloud-typography-faster\/\">Making Cloud.typography Fast(er)<\/a><\/strong><\/p>\n<p>Front-end performance consultant Harry Roberts (also see <a href=\"https:\/\/www.heartinternet.uk\/blog\/practical-tips-for-faster-websites-an-interview-with-harry-roberts\/\">our interview with him<\/a>) discovered that the <a href=\"https:\/\/www.typography.com\/webfonts\">cloud.typography site<\/a> wasn\u2019t quite as fast as it could be, so he analysed the waterfall performance chart in DevTools. In this post, he explains what he found and how \u2014 if you use cloud.typography \u2014 you can make your own sites faster with just a few changes.<\/p>\n<p><strong><a href=\"https:\/\/csswizardry.com\/2019\/01\/bandwidth-or-latency-when-to-optimise-which\/\">Bandwidth or Latency: When to Optimise for Which<\/a><\/strong><\/p>\n<p>More useful advice from Harry Roberts! Here he shares a DevTools tip to determine whether your assets would benefit most from an increase in bandwidth or a reduction in latency. As a rule of thumb, improvements in latency would be more beneficial than improvements in bandwidth, and that bandwidth optimisations are noticed more when dealing with larger files.<\/p>\n<p><strong><a href=\"https:\/\/www.youtube.com\/watch?v=l23fbEZ-jKE\">Hands on Performance Debugging with the Browser in DevTools\u00a0<\/a><\/strong><\/p>\n<p>In this video JavaScript developer advocate Alex Lakatos presents a no-slides, hands-on, live debugging session using only the browser developer tools on a website he picked from the audience. He dives deep into spotting performance bottlenecks into any website and how to fix them.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/l23fbEZ-jKE\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Debugging JavaScript and TypeScript<\/p>\n<p><strong><a href=\"https:\/\/blog.bitsrc.io\/debugging-javascript-like-a-pro-a2e0f6c53c2e\">Debugging Javascript Like a Pro<\/a><\/strong><\/p>\n<p>This article aims to explain the most useful tools and techniques provided by the Chrome DevTools to debug your Javascript code better and faster than ever before. Topics covered include setting breakpoints to debug code at a specific line, navigating the call stack, pausing\/resuming the script execution, and more.<\/p>\n<p><strong><a href=\"https:\/\/hacks.mozilla.org\/2019\/05\/faster-smarter-javascript-debugging-in-firefox\/\">Faster Smarter JavaScript Debugging in Firefox DevTools<\/a><\/strong><\/p>\n<p>The Firefox DevTools team is designing a more productive debugging experience and in this article explores inline breakpoints for fine-grained pausing and stepping, seamless debugging for JavaScript Workers, human-friendly variable names for source maps and more.<\/p>\n<p>&nbsp;<\/p>\n<p><strong><a href=\"https:\/\/hacks.mozilla.org\/2019\/09\/debugging-typescript-in-firefox-devtools\/\">Debugging TypeScript in Firefox DevTools<\/a><\/strong><\/p>\n<p>This article explains how to use Firefox to debug <a href=\"https:\/\/www.typescriptlang.org\/index.html\">TypeScript<\/a> applications. As today\u2019s browsers can\u2019t run TypeScript code directly, you\u2019ll learn how to compile TypeScript into JavaScript before it\u2019s included in an HTML page and how to generate a source-map that can be used to debug the TypeScript code with DevTools.<\/p>\n<p>Miscellaneous<\/p>\n<p><strong><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/dom\/\">Get Started with Viewing and Changing the DOM<\/a><\/strong><\/p>\n<p>An interactive tutorial by Google to teach you the basics of viewing and changing a page\u2019s DOM using Chrome DevTools. Topics covered include editing the DOM, accessing nodes in the Console, and adding breakpoints when the JavaScript modifies the DOM.<\/p>\n<p><strong><a href=\"https:\/\/hacks.mozilla.org\/2019\/10\/auditing-for-accessibility-problems-with-firefox-developer-tools\/\">Auditing for Accessibility Problems with Firefox Developer Tools<\/a><\/strong><\/p>\n<p>An overview of the Accessibility Inspector that in Firefox 70 has become auditing facility, which helps identify and fix many common mistakes and practices that reduce site accessibility.<\/p>\n<p><strong><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/accessibility\/navigation\">Navigate Chrome DevTools with Assistive Technology<\/a><\/strong><\/p>\n<p>This guide by Google aims to help users who primarily rely on assistive technology like screen readers access and use Chrome DevTools. Note that the accessibility of DevTools is a work-in-progress \u2014 this article walks you through the panels which are the most accessible and highlights specific issues you may encounter along the way.<\/p>\n<p><strong><a href=\"https:\/\/noti.st\/trentmwillis\/wls5J4\/powerful-automation-with-the-chrome-devtools-protocol\">Powerful Automation with the Chrome DevTools Protocol<\/a><\/strong><\/p>\n<p>In this conference talk, Trent Willis, a senior UI engineer at Netflix, explains how you can start using the Chrome DevTools Protocol to unlock powerful automation techniques for your web application. Trent also dives into the really exciting possibilities that open up when using this in conjunction with headless browsers, such as holistic end-to-end testing, the collection of code usage metrics, and new service paradigms.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/piip-JSc4hc\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Books, newsletters and videos<\/h2>\n<p><strong><a href=\"https:\/\/www.sitepoint.com\/premium\/books\/browser-devtool-secrets\/read\/1?preview=true\">Browser DevTool Secrets<\/a><\/strong><\/p>\n<p>Browser development tools have evolved from basic consoles to fully integrated development environments, but few of us venture beyond the basics. In this guide by Craig Buckler, you\u2019ll explore the features you may not have considered. Part of SitePoint Premium, but the first chapter (Start-up, Network and Performance) is available to read for free.<\/p>\n<p><strong><a href=\"https:\/\/umaar.com\/dev-tips\/\">Dev Tips<\/a><\/strong><\/p>\n<p>This is the essential newsletter to subscribe to if you want to learn more about DevTools. Every week Uma Hansa sends you a developer tip (mostly focused on Chrome DevTools), in the form of a GIF with a short explanation. Recent topics have included the CSS Overview Panel, debugging your push notifications workflow, and overriding your geolocation with predefined areas or custom locations.<\/p>\n<p><strong><a href=\"https:\/\/medium.com\/@tomsu\">The DevTools Advent Calendar<\/a><\/strong><\/p>\n<p>Last year frontend trainer Tomek Su\u0142kowski published a series of short articles with tips on how to use DevTools in more performant and fun ways. There are 70 tips in total \u2014 a real DevTools treasure trove!<\/p>\n<p><strong><a href=\"https:\/\/www.youtube.com\/MozillaDeveloper\">Mozilla Developer Video Channel<\/a><\/strong><\/p>\n<p>Mozilla\u2019s developer YouTube channel is crammed with excellent short videos to help you get the most out of Firefox DevTools. Presented by amazing experts such as Jenn Simmons and Miriam Suzanne, you\u2019ll discover things like a way to see HTML in one pane, CSS in another pane, and a third Developer Tool at the same time in Firefox:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/N6aMLUZ-v3w\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong><a href=\"https:\/\/www.youtube.com\/channel\/UCnUYZLuoy1rq1aVMwx4aTzw\">Google Chrome Developers Video Channel<\/a><\/strong><\/p>\n<p>Of course Google has a similar channel and with every new browser release publishes a short video explaining <a href=\"https:\/\/www.youtube.com\/playlist?list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD\">what\u2019s new in DevTools<\/a>. There\u2019s also a related <a href=\"https:\/\/www.youtube.com\/watch?v=Q81403HNZRc&amp;list=PLNYkxOF6rcIDfz8XEA3loxY32tYh7CI3m\">New in Chrome<\/a> playlist for developers as well as more specific ones about <a href=\"https:\/\/www.youtube.com\/watch?v=1rjBtsLTLLY&amp;list=PLNYkxOF6rcICVl6Vb-AFlw81bQLuv6a_P\">improving web performance<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=psB_Pjwhbxo&amp;list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh\">building progressive web apps<\/a>.<\/p>\n<p><em>For more information about the latest DevTools, check out the overviews of <\/em><a href=\"https:\/\/hacks.mozilla.org\/category\/firefox\/firefox-releases\/\"><em>Firefox releases<\/em><\/a><em> and <\/em><a href=\"https:\/\/hacks.mozilla.org\/category\/developer-tools\/\"><em>Firefox Developer Tools articles<\/em><\/a><em> as well as <\/em><a href=\"https:\/\/developers.google.com\/web\/updates\/2019\/10\/devtools\"><em>What\u2019s New in Chrome DevTools<\/em><\/a><em> (scroll to the bottom for a list of everything that&#8217;s been covered in this series).\u00a0\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.<\/p>\n","protected":false},"author":2,"featured_media":21883,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":{"0":"post-21881","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet<\/title>\n<meta name=\"description\" content=\"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-11T10:12:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"30 DevTools resources to help you get the most out of Firefox and Chrome\",\"datePublished\":\"2019-12-11T10:12:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\"},\"wordCount\":1925,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\",\"name\":\"30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg\",\"datePublished\":\"2019-12-11T10:12:06+00:00\",\"description\":\"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 DevTools resources to help you get the most out of Firefox and Chrome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet","description":"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/","og_locale":"en_GB","og_type":"article","og_title":"30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet","og_description":"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.","og_url":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-12-11T10:12:06+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"30 DevTools resources to help you get the most out of Firefox and Chrome","datePublished":"2019-12-11T10:12:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/"},"wordCount":1925,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg","articleSection":["Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/","url":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/","name":"30 DevTools resources to help you get the most out of Firefox and Chrome - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg","datePublished":"2019-12-11T10:12:06+00:00","description":"Here are 30 DevTools resources for Firefox and Chrome that will help you diagnose and debug website issues quickly and easily.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/12\/devtools-article-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/30-devtools-resources-to-help-you-get-the-most-out-of-firefox-and-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"30 DevTools resources to help you get the most out of Firefox and Chrome"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=21881"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21881\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/21883"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=21881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=21881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=21881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}