{"id":21192,"date":"2026-01-22T13:00:13","date_gmt":"2026-01-22T13:00:13","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/the-top-6-must-know-devtools-tips-and-tricks\/"},"modified":"2026-01-23T10:54:50","modified_gmt":"2026-01-23T10:54:50","slug":"6-must-know-chrome-devtools-tips-and-tricks","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/","title":{"rendered":"6 must-know Chrome DevTools tips and tricks."},"content":{"rendered":"<div class=\"entry-content\"><p><span style=\"font-weight: 400;\">If you work in <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/website-development\/\"><span style=\"font-weight: 400;\">website development<\/span><\/a><span style=\"font-weight: 400;\">, there\u2019s a good chance you\u2019ve opened <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> more times than you can count. Whether you\u2019re debugging layout issues, checking performance, testing responsive behaviour, or inspecting front-end code, <\/span><span style=\"font-weight: 400;\">Google Chrome Developer Tools<\/span><span style=\"font-weight: 400;\"> are one of the most powerful (and most underrated) tools available to web developers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But while most people know the basics &#8211; right click, inspect, tweak some CSS &#8211; DevTools has far more to offer. When used properly, it can speed up development, improve quality, and help you diagnose problems faster.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this blog, we share six must-know tips to help you get more from <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> and make the most of these <\/span><span style=\"font-weight: 400;\">Chrome web development tools<\/span><span style=\"font-weight: 400;\"> in your day-to-day workflow.<\/span><\/p>\n<h2><b>What is <\/b><b>Chrome DevTools<\/b><b>?<\/b><\/h2>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\"><span style=\"font-weight: 400;\">Chrome DevTools<\/span><\/a><span style=\"font-weight: 400;\">, also known as <\/span><span style=\"font-weight: 400;\">Google Chrome Developer Tools<\/span><span style=\"font-weight: 400;\">, is a built-in set of web development tools that helps you inspect, <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/solutions\/website-support-hosting\/\"><span style=\"font-weight: 400;\">test<\/span><\/a><span style=\"font-weight: 400;\">, and troubleshoot websites directly in the browser. It gives you real-time visibility into how a page is built and how it behaves &#8211; from HTML structure and CSS styling, to JavaScript performance, loading speed, and responsive layouts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At a basic level, <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> lets you right-click and inspect elements on a page to see what\u2019s happening behind the scenes. But it goes far beyond that. It\u2019s an essential tool for modern web development that can allow you to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Diagnose layout and styling issues quickly (without guessing what\u2019s causing the problem)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test responsive behaviour across screen sizes and devices<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Debug scripts and front-end functionality more efficiently<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Audit performance and page speed bottlenecks<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Check accessibility and <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/digital-marketing\/seo\/\"><span style=\"font-weight: 400;\">SEO<\/span><\/a><span style=\"font-weight: 400;\"> best practices using built-in tools like Lighthouse<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Preview changes live before committing anything in your codebase<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Whether you\u2019re a developer, designer, QA tester, or digital marketer, <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> makes it faster and easier to understand how a site is working and what needs improving.<\/span><\/p>\n<h2><b>6 must-know <\/b><b>ChromeDevTools<\/b><b> tips and tricks<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you know what <\/span><span style=\"font-weight: 400;\">ChromeDevTools<\/span><span style=\"font-weight: 400;\"> can do, here are six essential tips and tricks to help you work faster and more efficiently.<\/span><\/p>\n<h3><b>1. Test responsive layouts instantly with Device Mode<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">One of the most useful features inside <\/span><span style=\"font-weight: 400;\">ChromeDevTools<\/span><span style=\"font-weight: 400;\"> is Device Mode, which is a quick way to see how a website behaves on different screens. Instead of resizing your browser window manually (and guessing breakpoints), Device Mode lets you simulate popular devices and test responsiveness properly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to use it:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click the Toggle Device Toolbar icon (or press Ctrl + Shift + M)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose a device preset (iPhone, Pixel, iPad etc.) or set a custom size<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Responsive issues are some of the most common problems in web development. But using Device Mode helps you spot any broken layouts, overlapping elements, awkward spacing, missing mobile navigation, or inconsistent typography.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re using <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> regularly, this feature alone can save hours of time over the course of a project.<\/span><\/p>\n<h3><b>2. Use the Colour Picker to speed up design tweaks<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">When you\u2019re adjusting styles, colours are one of the first things you\u2019ll edit and <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> can make this task incredibly fast.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inside the Styles panel, you can click any colour value (like #000000 or rgba\u2026) to open a visual colour picker and quickly test new colours without touching your codebase.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is extremely helpful because:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can preview changes live on the page<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can fine-tune shades quickly<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can switch between formats (HEX, RGB, HSL)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can test transparency and contrast<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This is especially useful when you\u2019re aligning UI elements with a brand palette or ironing out inconsistencies across components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It might seem small, but tools like this are exactly why <\/span><span style=\"font-weight: 400;\">Google Chrome Developer Tools<\/span><span style=\"font-weight: 400;\"> are so valuable because they turn what would be a slow trial-and-error work into quick, confident editing.<\/span><\/p>\n<h3><b>3. Force hover, focus, and active states (without fighting your mouse)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Interactive states like hover and focus are essential for good <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/solutions\/user-experience\/\"><span style=\"font-weight: 400;\">user experience (UX)<\/span><\/a><span style=\"font-weight: 400;\">, but they\u2019re also notoriously awkward to test manually. Hover menus disappear the moment your cursor moves, focus states vanish when you click away, and active states are difficult to inspect at all. <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> solves this with forced element states.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how you can do it:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Inspect an element<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the Styles panel, click \u2018:hov\u2019<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose the state you want to force, such as :hover, :focus, :active, or :visited<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">With forced element states, you can test hover effects on buttons and links, dropdown navigation behaviour, focus styles for accessibility, and active click states for UI consistency.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re building modern interfaces, this is one of the most practical <\/span><span style=\"font-weight: 400;\">Chrome DevTools <\/span><span style=\"font-weight: 400;\">features you can use.<\/span><\/p>\n<h3><b>4. Find and switch between files quickly in the Sources panel<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Sources tab is where DevTools becomes more than an inspector, it becomes a debugging tool. If you\u2019re working on a modern site with scripts, bundles, and stylesheets, finding the right file can be time-consuming.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a simple but powerful tip to using quick file search:<\/span><\/p>\n<p><b>Shortcut:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Press Ctrl + P (on Windows) or Cmd + P (on Mac) to open a search bar that lets you quickly find files by name.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is particularly useful when you\u2019re navigating large projects, working with frameworks, or debugging complex issues where multiple scripts are involved.<\/span><\/p>\n<p><b>Bonus tip:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">You can also search within files using:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ctrl + F\/Cmd + F for a quick find<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ctrl + Shift + F\/Cmd + Shift + F to search across all loaded source files<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When you\u2019re working under pressure, small DevTools shortcuts like this make a huge difference.<\/span><\/p>\n<h3><b>5. Simulate slow internet with Network Throttling<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Performance matters, and if you only ever test websites on fast Wi-Fi and powerful machines, you\u2019ll miss a huge chunk of real-world user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> includes Network Throttling, which allows you to simulate slower connections like 3G or 4G. This helps you understand how your site performs under realistic conditions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to use it:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open DevTools<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to the Network tab<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Find the Throttling dropdown (often set to \u201cNo throttling\u201d)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select a speed profile (e.g. Slow 3G, Fast 3G)<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Through Network Throttling, you\u2019ll learn which assets are slowing load time, whether images are too heavy, how long it takes for core content to appear, or if scripts or third-party tools are delaying performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you care about UX, accessibility, and SEO, this is one of the most impactful <\/span><span style=\"font-weight: 400;\">Chrome web development tools<\/span><span style=\"font-weight: 400;\"> you can use.<\/span><\/p>\n<h3><b>6. Run Lighthouse audits to improve performance, SEO, and accessibility<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> also includes <\/span><a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\"><span style=\"font-weight: 400;\">Lighthouse<\/span><\/a><span style=\"font-weight: 400;\">, a built-in auditing tool that helps you assess and improve your website. Through Lighthouse, you can review pages for performance, accessibility, SEO, and best practices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll receive clear feedback and actionable recommendations &#8211; from compressing images and reducing unused JavaScript, to improving meta tags and accessibility labels.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s worth remembering that Lighthouse is not \u201cthe final answer\u201d, but it\u2019s a great starting point. If you want quick insights into improvements that could boost user experience and search visibility, this is one of the most useful features in <\/span><span style=\"font-weight: 400;\">Google Chrome Developer Tools<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><b>Do you need professional web development services?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Mastering <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> can transform how you build, test, and optimise websites, and give you the tools to streamline your workflow, solve problems faster, and deliver high-performing sites.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At Fifteen, we\u2019ve helped numerous brands improve their websites, troubleshoot faster, and enhance performance through our expert use of <\/span><span style=\"font-weight: 400;\">Chrome DevTools<\/span><span style=\"font-weight: 400;\"> and strategic <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/website-development\/\"><span style=\"font-weight: 400;\">web development<\/span><\/a><span style=\"font-weight: 400;\"> practices.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With years of experience and a portfolio of successful projects, we know exactly how to apply these tools to drive measurable results. <\/span><a href=\"https:\/\/www.fifteendesign.co.uk\/contact\/\"><span style=\"font-weight: 400;\">Get in touch<\/span><\/a><span style=\"font-weight: 400;\"> with our team today, and let\u2019s use our expertise to transform your website into a high-performing, results-driven powerhouse.<\/span><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"If you work in website development, there\u2019s a good chance you\u2019ve opened Chrome DevTools more times than you can count. Whether you\u2019re debugging layout issues, checking performance, testing responsive behaviour, or inspecting front-end code, Google Chrome Developer Tools are one of the most powerful (and most underrated) tools available to web developers. But while most [&hellip;]","protected":false},"author":84,"featured_media":30443,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1680,1697],"tags":[],"class_list":["post-21192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","category-website-testing"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>6 must-know Chrome DevTools tips and tricks. - Fifteen<\/title>\n<meta name=\"description\" content=\"We share 6 must-know tips to help you get more from Chrome DevTools and make the most of these tools in your day-to-day workflow.\" \/>\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.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 must-know Chrome DevTools tips and tricks.\" \/>\n<meta property=\"og:description\" content=\"We share 6 must-know tips to help you get more from Chrome DevTools and make the most of these tools in your day-to-day workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-22T13:00:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-23T10:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1050\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 must-know Chrome DevTools tips and tricks. - Fifteen","description":"We share 6 must-know tips to help you get more from Chrome DevTools and make the most of these tools in your day-to-day workflow.","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.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/","og_locale":"en_GB","og_type":"article","og_title":"6 must-know Chrome DevTools tips and tricks.","og_description":"We share 6 must-know tips to help you get more from Chrome DevTools and make the most of these tools in your day-to-day workflow.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2026-01-22T13:00:13+00:00","article_modified_time":"2026-01-23T10:54:50+00:00","og_image":[{"width":2000,"height":1050,"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg","type":"image\/jpeg"}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"6 must-know Chrome DevTools tips and tricks.","datePublished":"2026-01-22T13:00:13+00:00","dateModified":"2026-01-23T10:54:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/"},"wordCount":1279,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg","articleSection":["Web Development","Website Testing"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/","name":"6 must-know Chrome DevTools tips and tricks. - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg","datePublished":"2026-01-22T13:00:13+00:00","dateModified":"2026-01-23T10:54:50+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"We share 6 must-know tips to help you get more from Chrome DevTools and make the most of these tools in your day-to-day workflow.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2018\/07\/Chrome-DevTools-Tips-and-Tricks.jpg","width":2000,"height":1050,"caption":"chrome-devtools-tips-and-tricks"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/6-must-know-chrome-devtools-tips-and-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"6 must-know Chrome DevTools tips and tricks."}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21192"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21192\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media\/30443"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}