{"id":202648,"date":"2023-11-03T14:47:38","date_gmt":"2023-11-03T14:47:38","guid":{"rendered":"https:\/\/www.markup.io\/?p=202648"},"modified":"2023-11-03T14:47:41","modified_gmt":"2023-11-03T14:47:41","slug":"chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/","title":{"rendered":"Chrome developer tools: 10 tricks web designers should know"},"content":{"rendered":"\n<p>Whether you&#8217;re on Windows, Android, or any device with a web browser, you&#8217;ve likely encountered the somewhat mysterious &#8220;developer tools&#8221; screen at some point.<\/p>\n\n\n\n<p>The interface of Chrome&#8217;s DevTools, with its panels teeming with technical settings, can be a daunting sight. It&#8217;s like walking into a labyrinth if you&#8217;re not a programmer.<\/p>\n\n\n\n<p>You might be tempted to close that tab as quickly as possible to get away from alllllll the overwhelming options.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-walk-away.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/reaction-8qwWel7A1Z8Ew5WKRL\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>But don\u2019t panic!&nbsp;<\/p>\n\n\n\n<p>Developer tools don\u2019t have to be just for developers. With just a bit of guidance, Google Chrome&#8217;s built-in developer tools and debugging tools can be useful for almost any internet user.<\/p>\n\n\n\n<p>This post explains what Chrome developer tools are, breaks down the different panels and settings, and gives tips for using the tools to improve your browsing experience.<\/p>\n\n\n\n<p>You&#8217;ll learn handy tricks like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Monitoring network requests to speed up page load times<\/li>\n\n\n\n<li>Inspecting and editing page elements on the fly<\/li>\n\n\n\n<li>Debugging errors and issues with pages<\/li>\n<\/ul>\n\n\n\n<p>So next time you accidentally stumble into the developer tools interface in your Chrome browser, don\u2019t close it immediately!&nbsp;<\/p>\n\n\n\n<p>With the right mindset and a few pointers, you can unlock all sorts of capabilities for improving your everyday web browsing.<\/p>\n\n\n\n<p><em>Regardless<\/em> of your technical expertise.&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Table of contents<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#definition\">Chrome developer tools 101<\/a><\/li>\n\n\n\n<li><a href=\"#superpowers\">6 DevTools superpowers for web designers<\/a><\/li>\n\n\n\n<li><a href=\"#tips-and-tricks\">10 pro tips for DevTools domination<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"definition\"><strong>Chrome developer tools 101<\/strong><\/h2>\n\n\n\n<p>Tired of flying blind when designing, developing, or debugging web pages? Google Chrome has your back with its built-in superpowers \u2013 the Chrome DevTools.<\/p>\n\n\n\n<p>Think of DevTools as the ultimate multi-purpose toolkit for taking control of your web projects. With these powerful yet easy-to-use tools, you can poke, prod, and <a href=\"https:\/\/www.markup.io\/blog\/best-web-annotation-tools-for-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">customize web pages<\/a> right from your browser. Plus, you get to see your edits take effect in real time \u2013 no waiting around required.<\/p>\n\n\n\n<p>So whether you&#8217;re a designer needing to perfect layouts and animations, a <a href=\"https:\/\/www.markup.io\/blog\/web-development-team-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">developer debugging code<\/a>, or really anyone who wants precise command of web pages, DevTools is your new bestie.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to access developer tools on Chrome<\/strong><\/h3>\n\n\n\n<p>Finding Chrome&#8217;s hidden magic is simple:<\/p>\n\n\n\n<p>Click the three-dot menu in the top right corner of Chrome. Then click <strong><em>More tools &gt; Developer tools.<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-op1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Or, right-click anywhere on the web page you want to customize, then click <strong><em>Inspect<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-op2.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>For all you impatient wizards, there&#8217;s a handy shortcut to access Chrome&#8217;s sorcery:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Windows\/Linux<\/strong>: Press CTRL+Shift+C<\/li>\n\n\n\n<li><strong>Mac<\/strong>: Press CMD+Option+C<\/li>\n<\/ul>\n\n\n\n<p>Bam! The magical DevTools window appears. \u2728<\/p>\n\n\n\n<p>Now, to unlock these devtools&#8217; full power, wave hello to the main tabs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elements<\/strong>: X-ray vision to see the HTML and CSS code behind the curtain.&nbsp;<\/li>\n\n\n\n<li><strong>Console<\/strong>: A chatroom for the website to share updates. You can also write JavaScript to make changes to the webpage.&nbsp;<\/li>\n\n\n\n<li><strong>Sources<\/strong>: The filing cabinet for the site&#8217;s behind-the-scenes files.<\/li>\n\n\n\n<li><strong>Network<\/strong>: Shows all the files needed to load the page.<\/li>\n\n\n\n<li><strong>Performance<\/strong>: The site&#8217;s digital personal trainer giving you a report of the page load time.<\/li>\n\n\n\n<li><strong>Memory<\/strong>: For investigating memory distribution on the web page.<\/li>\n\n\n\n<li><strong>Application<\/strong>: Find stored browser secrets here.<\/li>\n\n\n\n<li><strong>Security<\/strong>: The site&#8217;s bodyguard showing security deets and flashing the server\u2019s certificate.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"superpowers\"><strong>6 DevTools superpowers for web designers<\/strong><\/h2>\n\n\n\n<p>As a <a href=\"https:\/\/www.markup.io\/blog\/working-with-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">web designer<\/a>, your job goes way beyond just making pretty websites. To work your magic, you need to understand how all the behind-the-scenes code comes together to create the final <a href=\"https:\/\/www.markup.io\/blog\/ux-audit\/\" target=\"_blank\" rel=\"noreferrer noopener\">user experience<\/a>.<\/p>\n\n\n\n<p>DevTools allows you to x-ray view sites to spot and fix errors <em>before<\/em> they ruin the magic. \ud83e\ude84<\/p>\n\n\n\n<p>Here\u2019s how.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #1: View live web pages in different dimensions&nbsp;<\/strong><\/h3>\n\n\n\n<p>One of the handiest design superpowers is shape-shifting sites to preview different dimensions. Wanna view that responsive site on multiple devices? DevTools lets you instantly morph to different screen sizes and orientations with a snap.<\/p>\n\n\n\n<p>No more tedious manual resizing or guessing how it&#8217;ll look. Just use these commands:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Windows\/Linux<\/strong>: CTRL + Shift + I (open DevTools) then CTRL + Shift + M<\/li>\n\n\n\n<li><strong>Mac<\/strong>: CMD + Shift + I then CMD + Shift + M<\/li>\n<\/ul>\n\n\n\n<p>Or right-click the page and select <strong><em>Inspect<\/em><\/strong> to summon DevTools, then click the mobile icon.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-designers1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can even simulate weak network connections to preview loading behavior.&nbsp;<\/p>\n\n\n\n<p>Go to the Custom menu, select any of the options in the dropdown, and refresh the page after selecting a throttle value.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #2: Chameleon color changes<\/strong><\/h3>\n\n\n\n<p>Changing up a website&#8217;s colors for some <a href=\"https:\/\/www.markup.io\/blog\/moodboard-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">moodboard magic<\/a>? DevTools lets you instantly preview different color schemes on live sites.<\/p>\n\n\n\n<p>Just summon the DevTools window, select any element you want to recolor, and a handy color picker appears for all your design needs.&nbsp;<\/p>\n\n\n\n<p>Switch up those colors and watch the site transform before your eyes!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-designers2.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #3: Lightning-fast screenshots<\/strong><\/h3>\n\n\n\n<p>DevTools also makes easy work of capturing screenshots. Want feedback on a specific design element? Need to collaborate with your team? Just use these commands:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Windows\/Linux<\/strong>: CTRL + Shift + C, then CTRL + Shift + P<\/li>\n\n\n\n<li><strong>Mac<\/strong>: CMD + Shift + C, then CMD + Shift + P<\/li>\n<\/ul>\n\n\n\n<p>Type \u201cscreenshot&#8221; and capture any part of the page you want!<\/p>\n\n\n\n<p>And for seamless sharing and feedback, send those DevTools screenshots directly into MarkUp.io.&nbsp;<\/p>\n\n\n\n<p>Our <a href=\"https:\/\/www.markup.io\/blog\/most-popular-collaboration-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">collaboration tools<\/a> help teams work visual magic faster. \ud83d\udcab<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-screenshots.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #4: Page speed sorcery \ud83e\uddd9<\/strong><\/h3>\n\n\n\n<p>Want to check how fast it takes your mobile or web application to load? DevTools to the rescue!<\/p>\n\n\n\n<p>You can easily measure page load times right within DevTools. You can also check accessibility, SEO, and more.&nbsp;<\/p>\n\n\n\n<p>Just summon the DevTools window and click the <strong><em>Lighthouse<\/em><\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-page-loading.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You\u2019ll get several categories to explore such as Best Practices, SEO, Performance, Accessibility, and more.&nbsp;<\/p>\n\n\n\n<p>Select <strong><em>Performance<\/em><\/strong> to see your site&#8217;s Speed Index. 0-4.3 seconds is fast, 4.4-5.8 is moderate, and over 5.8 is slow.<\/p>\n\n\n\n<p>But the real magic comes after \u2013 Lighthouse also gives you a list of &#8220;Opportunities&#8221; to speed up load time. It&#8217;s like a digital assistant for optimization!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #5: Spying on analytics<\/strong><\/h3>\n\n\n\n<p>Keep an eagle \ud83d\udc41 on your Google Analytics data with DevTools!<\/p>\n\n\n\n<p>Want to double check those marketing campaign numbers? Verify your stats are accurate? DevTools lets you sneak a peek behind the scenes.<\/p>\n\n\n\n<p>Just:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the Network panel in DevTools<\/li>\n\n\n\n<li>Load your page<\/li>\n\n\n\n<li>Click <strong>3rd-party requests<\/strong><\/li>\n\n\n\n<li>Find requests from GA (utm.gif)<\/li>\n\n\n\n<li>Click to see all the deets requested<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-tracking-request.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>DevTools superpower #6: Peek into design details<\/strong><\/h3>\n\n\n\n<p>The <strong>Inspect<\/strong> tool in DevTools lets you x-ray view changes made to any element. Just hover over something on the page to see all the design deets!<\/p>\n\n\n\n<p>This gives you super vision into CSS changes, properties, and more. Never wonder &#8220;what did the developer change?&#8221; again!<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-preview-design.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>DevTools tips the design details right into your hands. Take that, tedious guesswork!<\/p>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>Okay, so you&#8217;ve seen the magical design superpowers Chrome DevTools can grant you. But to take your skills from novice to master wizard, you need&#8230;<\/p>\n\n\n\n<p><em>\u2026drumroll please. \ud83e\udd41<\/em><\/p>\n\n\n\n<p>\u2026Pro tips and tricks for DevTools domination! Keep scrolling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips-and-tricks\"><strong>10 pro tips for DevTools domination<\/strong><\/h2>\n\n\n\n<p>Still trying to navigate the labyrinth of DevTools? Rest assured, you&#8217;re not alone. From nifty keyboard shortcuts to simple hacks within the DevTool window, a wealth of knowledge is waiting to be tapped into. Let&#8217;s dive into some top tips to <a href=\"https:\/\/www.markup.io\/blog\/productivity-tools-for-marketers\/\" target=\"_blank\" rel=\"noreferrer noopener\">supercharge your productivity<\/a>:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #1: Open the command menu<\/strong><\/h3>\n\n\n\n<p>Think of the command menu as your personal concierge. It&#8217;s ready and waiting to execute a myriad of commands, saving you from endless clicking.<\/p>\n\n\n\n<p>To open the DevTools window, simply press CTRL (or CMD)+Shift+I, then CTRL (or CMD)+Shift+P to launch the command menu.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-command-menu.jpg\" alt=\"Screenshot of Chrome Developer Tools showing the Elements, Console, Sources, Network, Performance, Memory, and Lighthouse panels.\" class=\"wp-image-202666\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-command-menu.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-command-menu-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-command-menu-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Here, you can run a plethora of commands\u2014from capturing screenshots to tweaking colors, and beyond. \u2728<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #2: Search source codes<\/strong><\/h3>\n\n\n\n<p>Struggling to locate specific source codes? Well, here\u2019s a shortcut just for you.&nbsp;<\/p>\n\n\n\n<p>Type <strong>CTRL+Shift+F<\/strong> or <strong>CMD+Opt+F<\/strong> to summon the search bar within the DevTools window.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-search-bar.jpg\" alt=\"Screenshot of Chrome Developer Tools showing the Elements panel with a JavaScript function highlighted. The function is used to load the Google Tag Manager container on the page.\" class=\"wp-image-202667\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-search-bar.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-search-bar-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-search-bar-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Whether you&#8217;re hunting for &lt;bootstrap&gt; or something entirely different, the answer is now just a click away.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #3: Go full \u2018design mode\u2019<\/strong><\/h3>\n\n\n\n<p>Ever wished you could effortlessly edit text on your website to preview potential layout changes? Well, with &#8216;Design Mode,&#8217; you can!\u00a0<\/p>\n\n\n\n<p>Simply navigate to the <strong>console<\/strong> tab on DevTools. Type in <strong>document.designMode=&#8221;on,&#8221;<\/strong> and hit <strong>enter<\/strong>.\u00a0<\/p>\n\n\n\n<p>Voila! You&#8217;re now in control.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-designmode.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #4: Change document structure<\/strong><\/h3>\n\n\n\n<p>Caught without access to a site&#8217;s source file but need to make changes?&nbsp;<\/p>\n\n\n\n<p>No problem! You can copy and paste elements, effectively rearranging the structure as you see fit. It&#8217;s as simple as it sounds. \ud83d\udc4c<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-live-web-editing.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #5: Embrace the dark side with dark mode<\/strong><\/h3>\n\n\n\n<p>Feeling a more Goth aesthetic for your DevTools window? You can easily switch from light to dark mode. Just head over to <strong>Settings<\/strong> at the top-right corner of the window. Then navigate to Appearance &gt; Theme &gt; Dark.&nbsp;<\/p>\n\n\n\n<p>Voila! Your DevTools now has a sleek new look. \ud83d\udc85<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-dark-theme.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #6: DevTools position<\/strong><\/h3>\n\n\n\n<p>The DevTools window appears to the right of your browser by default, but it doesn\u2019t need to stay that way.&nbsp;<\/p>\n\n\n\n<p>Click the three dots located on the right side of the window. In the ensuing menu, you&#8217;ll spot the dockside showing an alternate position. Choose your desired position, and presto! You can get back to your tasks.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-docking-position.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #7: Master the multi-cursor<\/strong><\/h3>\n\n\n\n<p>Let\u2019s assume you&#8217;re familiar with Javascript code and need to edit identical elements across multiple lines.&nbsp;<\/p>\n\n\n\n<p>Rather than lose the next ten years of your life to repetitive copy-pasting, try this shortcut. \ud83d\udc47<\/p>\n\n\n\n<p>Press <strong>CTRL<\/strong> on your keyboard and click on the areas you want to change. This way, you can update the main line and see those changes mirrored on the others in real time.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-multicursor.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #8: Console workspace shortcuts<\/strong><\/h3>\n\n\n\n<p>Wanna work your coding magic across several lines? No biggie!<\/p>\n\n\n\n<p>Hit <strong>Shift+Enter<\/strong> to write code snippets. To execute, tap <strong>Enter<\/strong>.&nbsp;<\/p>\n\n\n\n<p>To clear the console for more coding, press <strong>CTRL+L for Windows<\/strong> or <strong>CMD+L for fancy Mac users.<\/strong> \ud83d\ude43<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #9: Sources workspace shortcuts<\/strong><\/h3>\n\n\n\n<p>Passing time in the Sources tab? Give these keyword shortcuts a shot:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Press <strong>CMD (CTRL) + O<\/strong> to reveal loaded files.&nbsp;<\/li>\n\n\n\n<li>For a peek into file properties, type <strong>CMD (CTRL) + Shift + O.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tip #10: The Watchlist<\/strong><\/h3>\n\n\n\n<p>Debugging a site?&nbsp;<\/p>\n\n\n\n<p>Add frequently used variables or expressions to the Watch list in the source tab for easy access.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-devtools-watch-list.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Boom! No more repetitive writing or copy-pasting! \ud83c\udf89<\/p>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>You made it to the end! Now isn\u2019t that just wonderful? \u263a\ufe0f<\/p>\n\n\n\n<p>But don&#8217;t stop exploring <em>just<\/em> yet. There&#8217;s a little more to uncover.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Your turn<\/strong><\/h2>\n\n\n\n<p>If you&#8217;re new to Chrome&#8217;s DevTools, remember that every master was once a beginner.\u00a0<\/p>\n\n\n\n<p>It might seem overwhelming now, but with time and the right collaborative efforts, you\u2019ll develop an invaluable skill set in no time.<\/p>\n\n\n\n<p>See, collaboration is where the <em>real<\/em> magic happens.&nbsp;<\/p>\n\n\n\n<p>Ever thought about working with others on a live website? Well, that&#8217;s where MarkUp.io steps into the spotlight. <\/p>\n\n\n\n<p>Our <a href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-on-google-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome extension<\/a> lets you collaborate on live websites in real time \u2013 super useful for tracking changes and keeping everyone on the same page.<\/p>\n\n\n\n<p>Think of MarkUp.io as your passport to a world of seamless <a href=\"https:\/\/www.markup.io\/blog\/design-collaboration-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">design collaboration<\/a>. After all, it&#8217;s trusted by leading designers and creatives as a platform to gather feedback in the least annoying way possible.<\/p>\n\n\n\n<p><a href=\"http:\/\/app.markup.io\/signup?trial=true?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=chrome-dev-tools&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free 30-day trial with MarkUp.io<\/a> and start taking your time back.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether you&#8217;re on Windows, Android, or any device with a web browser, you&#8217;ve likely encountered the somewhat mysterious &#8220;developer tools&#8221; screen at some point. The interface of Chrome&#8217;s DevTools, with its panels teeming with technical settings, can be a daunting sight. It&#8217;s like walking into a labyrinth if you&#8217;re not a programmer. You might be &hellip; <a href=\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":202649,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-202648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Chrome developer tools: 10 tricks web designers should know - Markup.io<\/title>\n<meta name=\"description\" content=\"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.\" \/>\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.markup.io\/blog\/chrome-developer-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chrome developer tools: 10 tricks web designers should know - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-03T14:47:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-03T14:47:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/\",\"url\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/\",\"name\":\"Chrome developer tools: 10 tricks web designers should know - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg\",\"datePublished\":\"2023-11-03T14:47:38+00:00\",\"dateModified\":\"2023-11-03T14:47:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chrome developer tools: 10 tricks web designers should know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chrome developer tools: 10 tricks web designers should know - Markup.io","description":"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.","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.markup.io\/blog\/chrome-developer-tools\/","og_locale":"en_GB","og_type":"article","og_title":"Chrome developer tools: 10 tricks web designers should know - Markup.io","og_description":"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.","og_url":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/","og_site_name":"Markup.io","article_published_time":"2023-11-03T14:47:38+00:00","article_modified_time":"2023-11-03T14:47:41+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg","type":"image\/jpeg"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/","url":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/","name":"Chrome developer tools: 10 tricks web designers should know - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg","datePublished":"2023-11-03T14:47:38+00:00","dateModified":"2023-11-03T14:47:41+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Learn how to use Chrome developer tools as a designer. Discover top tips that can help you be productive on this new journey.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/chrome-developer-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2023\/10\/chrome-developer-tools-hero.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/chrome-developer-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"Chrome developer tools: 10 tricks web designers should know"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/202648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=202648"}],"version-history":[{"count":7,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/202648\/revisions"}],"predecessor-version":[{"id":202678,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/202648\/revisions\/202678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/202649"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=202648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=202648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=202648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}