{"id":703,"date":"2024-09-21T17:06:01","date_gmt":"2024-09-21T17:06:01","guid":{"rendered":"https:\/\/algocademy.com\/blog\/mastering-web-development-how-to-use-devtools-for-enhanced-performance-and-debugging\/"},"modified":"2026-10-15T12:51:16","modified_gmt":"2026-10-15T12:51:16","slug":"mastering-web-development-how-to-use-devtools-for-enhanced-performance-and-debugging","status":"publish","type":"post","link":"https:\/\/algocademy.com\/blog\/mastering-web-development-how-to-use-devtools-for-enhanced-performance-and-debugging\/","title":{"rendered":"How to Use DevTools in Chrome: Open, Inspect, Debug, Speed Up"},"content":{"rendered":"<p>DevTools are the debugging tools built into your browser. In Chrome, press <code>F12<\/code> (or <code>Ctrl + Shift + I<\/code> on Windows and Linux, <code>Cmd + Option + I<\/code> on Mac), or right-click anything on a page and choose <strong>Inspect<\/strong>. From there you can read and edit the page&#8217;s HTML and CSS, run JavaScript, pause your code on a line, watch every network request, and measure why a page is slow. This guide walks through each panel in the order you will usually need it. Panel names are from Chrome&#8217;s official documentation as of October 2026; Edge, Brave and other Chromium browsers share almost all of them, and Firefox and Safari have close equivalents under similar names.<\/p>\n<h2>How to open DevTools<\/h2>\n<p>Any of these work in Chrome:<\/p>\n<ul>\n<li>Right-click an element and choose <strong>Inspect<\/strong>. DevTools opens on the Elements panel with that element selected.<\/li>\n<li>Press <code>Ctrl + Shift + C<\/code> (Windows, Linux, ChromeOS) or <code>Cmd + Option + C<\/code> (Mac) to start inspecting an element directly.<\/li>\n<li>Press <code>Ctrl + Shift + J<\/code> or <code>Cmd + Option + J<\/code> to open straight on the Console.<\/li>\n<li>Press <code>F12<\/code>, or use the Chrome menu, then <strong>More tools<\/strong>, then <strong>Developer tools<\/strong>.<\/li>\n<\/ul>\n<p>If the panel is cramped, use the three-dot menu in DevTools to change the dock side (right, bottom, left, or a separate window). If a panel you expect is missing, widen the window or click the <code>&raquo;<\/code> overflow button on the tab bar.<\/p>\n<h2>What each panel is for<\/h2>\n<table>\n<thead>\n<tr>\n<th>Panel<\/th>\n<th>Use it to<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Elements<\/td>\n<td>Inspect and edit the live DOM and CSS<\/td>\n<\/tr>\n<tr>\n<td>Console<\/td>\n<td>Read logged messages and errors, run JavaScript<\/td>\n<\/tr>\n<tr>\n<td>Sources<\/td>\n<td>Debug JavaScript with breakpoints, run snippets, save local edits<\/td>\n<\/tr>\n<tr>\n<td>Network<\/td>\n<td>See every request, its timing, headers and response<\/td>\n<\/tr>\n<tr>\n<td>Performance<\/td>\n<td>Record what the browser does and find slow load or runtime work<\/td>\n<\/tr>\n<tr>\n<td>Memory<\/td>\n<td>Find memory leaks<\/td>\n<\/tr>\n<tr>\n<td>Application<\/td>\n<td>Inspect local storage, cookies, IndexedDB and service workers<\/td>\n<\/tr>\n<tr>\n<td>Lighthouse<\/td>\n<td>Audit performance, accessibility, best practices and SEO<\/td>\n<\/tr>\n<tr>\n<td>Recorder<\/td>\n<td>Record, replay and measure user flows<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>DevTools in Chrome also include an AI assistance feature that can explain styles and errors. It is separate from the panels above; see Chrome&#8217;s DevTools documentation for how it handles your data before turning it on.<\/p>\n<h2>Elements: inspect and change HTML and CSS<\/h2>\n<p>The Elements panel shows the page as the browser currently holds it (the DOM), not the original source file. That difference matters: if JavaScript adds a node, you will see it here but not in &#8220;View page source&#8221;.<\/p>\n<ol>\n<li>Right-click the thing you care about and choose <strong>Inspect<\/strong>.<\/li>\n<li>In the <strong>Styles<\/strong> pane on the right, each rule is listed with the file and line it came from. Rules that lost the cascade are struck through, which answers &#8220;why isn&#8217;t my CSS applying?&#8221; in seconds.<\/li>\n<li>Click a value to edit it, or tick and untick the checkbox beside a declaration to switch it off. Changes apply instantly.<\/li>\n<li>Double-click text or a tag name in the tree to edit it. To change a larger piece, right-click the node and choose <strong>Edit as HTML<\/strong>.<\/li>\n<li>The <strong>Computed<\/strong> tab and the box-model diagram show the final size, margin and padding the browser used.<\/li>\n<\/ol>\n<p>All of this changes only your copy of the page in memory. Reload and it is gone. Once something looks right, copy the change back into your source files. If you edit a file under Sources with a Workspace set up, DevTools can save to disk, but do that deliberately.<\/p>\n<p>Common mistake: fixing a style in DevTools, forgetting to copy it back, and then wondering why production still looks wrong.<\/p>\n<h2>Console: errors and quick experiments<\/h2>\n<p>The Console shows errors, warnings and anything your code logs, and it lets you type JavaScript against the current page. A red error line includes a link to the file and line number; click it to jump to the code in Sources.<\/p>\n<p>Beyond <code>console.log<\/code>, these save time:<\/p>\n<ul>\n<li><code>console.table(rows)<\/code> prints an array of objects as a table.<\/li>\n<li><code>console.error<\/code> and <code>console.warn<\/code> style the output so it stands out from normal logs.<\/li>\n<li><code>console.group<\/code> and <code>console.groupEnd<\/code> nest related logs.<\/li>\n<li><code>$0<\/code> is the element currently selected in Elements, so <code>$0.textContent<\/code> works without writing a selector.<\/li>\n<li>The filter box and log-level dropdown hide noise so you can find one message.<\/li>\n<\/ul>\n<p>Logging is fine for quick checks. For anything with a loop or state that changes over time, a breakpoint is usually faster, because you can see every variable at once instead of guessing which one to print.<\/p>\n<p>If you are new to JavaScript errors, the lessons on <a href=\"https:\/\/algocademy.com\/link\/?lang=js&amp;problem=syntax-errors&amp;solution=1\">syntax errors<\/a> and <a href=\"https:\/\/algocademy.com\/link\/?lang=js&amp;problem=name-errors&amp;solution=1\">name errors<\/a> explain the two messages you will meet most often in this panel.<\/p>\n<h2>Sources: debug with breakpoints<\/h2>\n<p>A breakpoint pauses your code on a line so you can look around. Here is a small bug that looks harmless:<\/p>\n<pre><code class=\"language-javascript\">const cart = [\n  { name: \"Book\", price: 12, qty: 2 },\n  { name: \"Pen\", price: \"3\", qty: 5 },\n];\nlet t2 = 0;\nfor (const item of cart) { t2 = t2 + item.price; }\nconsole.log(t2);<\/code><\/pre>\n<p>Expected: 15. Actual output: <code>123<\/code>. The second price is the string <code>\"3\"<\/code>, so <code>12 + \"3\"<\/code> becomes the string <code>\"123\"<\/code>. Here is how to find that with DevTools instead of guesswork:<\/p>\n<ol>\n<li>Open <strong>Sources<\/strong> and pick your script in the <strong>Page<\/strong> file tree (or press <code>Ctrl + P<\/code> \/ <code>Cmd + P<\/code> and type its name).<\/li>\n<li>Click the line number of <code>t2 = t2 + item.price<\/code> to set a breakpoint.<\/li>\n<li>Reload or trigger the code. Execution stops on that line.<\/li>\n<li>Look at the <strong>Scope<\/strong> pane. On the second pass you will see <code>t2: 12<\/code> and <code>item.price: \"3\"<\/code>, with the quotes showing it is a string.<\/li>\n<li>Use <strong>Step over next function call<\/strong> to run one line, <strong>Step into next function call<\/strong> to enter a function, and <strong>Resume script execution<\/strong> to continue to the next breakpoint.<\/li>\n<\/ol>\n<p>Other tools in the same panel:<\/p>\n<ul>\n<li><strong>Watch<\/strong>: add an expression such as <code>typeof item.price<\/code> and see its value update as you step.<\/li>\n<li><strong>Call stack<\/strong>: shows how you got here; click a frame to inspect variables in the caller.<\/li>\n<li><strong>Conditional breakpoint<\/strong>: right-click a line number and add a condition like <code>item.qty &gt; 4<\/code> so you pause only on the case you care about. A <strong>logpoint<\/strong> prints a message instead of pausing, which replaces a temporary <code>console.log<\/code> you would have to delete later.<\/li>\n<li><strong>Event listener breakpoints<\/strong>: pause when a click, key press or timer fires, useful when you cannot find which handler runs.<\/li>\n<li><strong>Pause on exceptions<\/strong>: stop at the line that throws, not where the error eventually surfaces.<\/li>\n<\/ul>\n<p>While paused, the Console runs in the paused scope, so you can type <code>Number(item.price)<\/code> and test a fix before editing the file. For a broader method of working through bugs, see <a href=\"https:\/\/algocademy.com\/blog\/how-to-debug-like-a-pro-master-the-art-of-troubleshooting-your-code\/\">how to debug like a pro<\/a>, and for the same ideas in an editor, <a href=\"https:\/\/algocademy.com\/blog\/how-to-use-debuggers-and-ide-tools-effectively-a-comprehensive-guide\/\">how to use debuggers and IDE tools<\/a>.<\/p>\n<h2>Network: see what the page requests<\/h2>\n<p>Open the Network panel, then reload the page. DevTools only records while it is open, so open it first. Each row is one request.<\/p>\n<ul>\n<li><strong>Filter<\/strong> by type (Fetch\/XHR, JS, CSS, Img) with the buttons, or type text in the filter box. <code>-main.css<\/code> hides a file, and <code>domain:example.com<\/code> keeps one domain.<\/li>\n<li>Click a request to see <strong>Headers<\/strong> (status code, request and response headers), <strong>Preview<\/strong> and <strong>Response<\/strong> (the body), <strong>Initiator<\/strong> (what triggered it) and <strong>Timing<\/strong> (where the time went).<\/li>\n<li>Use the <strong>Throttling<\/strong> dropdown (default &#8220;No throttling&#8221;) to simulate a slower connection such as 3G, then reload.<\/li>\n<li>Long-press the reload button and choose <strong>Empty cache and hard reload<\/strong> to see what a first-time visitor downloads. Ticking <strong>Disable cache<\/strong> does the same while DevTools is open.<\/li>\n<\/ul>\n<p>Typical findings: an API call returning 404 or 500, a request that never fires because of a bug in your code, an image far larger than it is displayed, or a script that blocks everything else while it downloads.<\/p>\n<h2>Performance: find slow load and runtime work<\/h2>\n<ol>\n<li>Open the page in an Incognito window so extensions do not skew the numbers.<\/li>\n<li>Open <strong>Performance<\/strong>. Under capture settings, set <strong>CPU<\/strong> throttling (4x slowdown is a reasonable start; higher values approximate low-end phones).<\/li>\n<li>Click <strong>Record<\/strong>, do the thing that feels slow (scroll, click, load), then click <strong>Stop<\/strong>.<\/li>\n<li>Read the result: the overview charts show frame rate, CPU and network. The <strong>Main<\/strong> flame chart shows main-thread work with time on the horizontal axis and the call stack going down. Red markers flag long tasks. Click an event and the <strong>Summary<\/strong> tab names it and links to the code responsible.<\/li>\n<\/ol>\n<p>The question to ask is: what is occupying the main thread while the page feels stuck? Usually it is one long JavaScript task, repeated layout, or a large rendering job. Fix the biggest block first and record again to confirm it shrank. The Performance panel in recent Chrome versions also surfaces Core Web Vitals and suggested insights; the docs on <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/performance\">analyzing runtime performance<\/a> cover them.<\/p>\n<h2>Lighthouse: a quick audit<\/h2>\n<p>The <strong>Lighthouse<\/strong> panel runs an automated audit and scores Performance, Accessibility, Best Practices and SEO, each with a list of specific issues. Choose a device type (mobile or desktop) and categories, then run it. The default <strong>Navigation<\/strong> mode audits a fresh page load; <strong>Timespan<\/strong> audits while you interact; <strong>Snapshot<\/strong> audits the page as it is now.<\/p>\n<p>Treat the scores as a checklist, not a goal. Your machine, extensions and cached data all change the numbers, and Chrome&#8217;s own docs say results from different machines cannot be compared directly. For performance problems, Chrome recommends the Performance panel for detail; Lighthouse is most useful for accessibility, SEO and best-practice checks.<\/p>\n<h2>Application and Memory, briefly<\/h2>\n<p>Use <strong>Application<\/strong> to look at local storage, session storage, cookies and IndexedDB, and to clear them when a bug only happens for a returning visitor. It also shows service workers. Use <strong>Memory<\/strong> when a page gets slower and heavier the longer it stays open: take heap snapshots before and after an action and compare what was kept alive.<\/p>\n<h2>A simple workflow<\/h2>\n<ol>\n<li>Console shows an error: click the link to the line.<\/li>\n<li>Nothing in the Console, but wrong data: check Network for the request and its response.<\/li>\n<li>Wrong layout or style: select the element and read Styles and Computed.<\/li>\n<li>Wrong logic: set a breakpoint and read Scope.<\/li>\n<li>Feels slow: record in Performance, then compare after a fix.<\/li>\n<\/ol>\n<p>Reproduce the problem reliably first; a bug you can trigger on demand is a bug you can step through. To practice JavaScript with instant feedback, the lessons on <a href=\"https:\/\/algocademy.com\/link\/?lang=js&amp;problem=print&amp;solution=1\">printing to the console<\/a> are a gentle start, and the full <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\">Chrome DevTools documentation<\/a> covers every feature above in depth.<\/p>\n<h2>Frequently asked questions<\/h2>\n<h3>What are DevTools?<\/h3>\n<p>Debugging and inspection tools built into the browser. They show the page&#8217;s live HTML and CSS, run JavaScript, pause code, log network requests and record performance.<\/p>\n<h3>How do I open DevTools in Chrome?<\/h3>\n<p>Press <code>F12<\/code> or <code>Ctrl + Shift + I<\/code> (<code>Cmd + Option + I<\/code> on Mac), or right-click and choose Inspect.<\/p>\n<h3>Do changes I make in DevTools save?<\/h3>\n<p>No. Edits to HTML and CSS affect only the open page and vanish on reload, unless you set up a Workspace to save edits to local files.<\/p>\n<h3>How do I use DevTools to check page speed?<\/h3>\n<p>Use Network to see what loads and how large it is, Performance to find slow main-thread work, and Lighthouse for a quick scored audit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Open Chrome DevTools and use Elements, Console, Sources breakpoints, Network, Performance and Lighthouse to debug a page and find what makes it slow.<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-problem-solving"],"_links":{"self":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/703"}],"collection":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":3,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":8938,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/703\/revisions\/8938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/categories?post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/tags?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}