Meta tags:

Headings (most frequently used words):

devtools, is, the, to, it, how, tools, what, who, for, open, terminology, ui, of, your, understanding, use, on, this, page, word, about, security, first, works, workflow, built, in, browser, feature, always, attached, target, not, standard, debugs, runtime, version, webpage, can, change, source, code, high, level, description, differences, between, browsers, main, more, where, find, basic, dev, loop, firefox, chrome, edge, safari,

Text of the page (most frequently used words):
the (260), devtools (128), and (95), you (78), that (58), browser (48), tools (44), this (43), web (37), your (36), are (36), tool (35), for (31), code (31), page (28), tab (27), more (26), can (24), #browsers (23), changes (19), also (19), different (19), with (18), main (18), what (18), see (17), toolbar (17), use (16), make (16), open (16), how (16), when (15), not (15), firefox (14), all (14), find (14), css (14), only (14), development (13), which (13), tabs (13), panel (13), other (12), don (12), source (12), content (12), safari (11), displayed (11), chrome (11), webpage (11), example (11), made (10), there (10), have (10), issues (10), they (10), guide (10), one (9), drawer (9), right (9), website (9), used (9), but (9), javascript (9), has (8), from (8), change (8), most (8), edge (8), about (8), read (8), elements (8), debug (8), might (8), useful (7), some (7), its (7), doesn (7), need (7), fix (7), bottom (7), may (7), features (7), these (7), displays (7), look (7), contains (7), because (7), inspect (7), high (7), html (7), focus (7), level (7), many (6), workflow (6), following (6), top (6), just (6), then (6), sidebar (6), same (6), performance (6), storage (6), runtime (6), screenshot (6), shows (6), rendered (6), who (6), built (6), now (5), developers (5), step (5), application (5), often (5), button (5), visible (5), default (5), developer (5), where (5), learn (5), each (5), within (5), description (5), bugs (5), dom (5), using (5), help (5), like (5), understand (5), first (5), let (5), area (5), understanding (5), version (5), text (5), edit (4), therefore (4), any (4), test (4), editor (4), people (4), access (4), click (4), depending (4), window (4), list (4), time (4), such (4), new (4), inspector (4), two (4), console (4), accessibility (4), animations (4), specific (4), being (4), memory (4), tree (4), complex (4), isn (4), between (4), section (4), run (4), part (4), feature (4), however (4), server (4), color (4), debugs (4), websites (4), too (4), attached (4), tips (4), while (3), working (3), means (3), very (3), result (3), back (3), reload (3), doing (3), around (3), similar (3), size (3), hidden (3), entire (3), exist (3), documentation (3), know (3), yet (3), than (3), hard (3), users (3), separate (3), log (3), security (3), way (3), note (3), tasks (3), usually (3), opened (3), called (3), requests (3), network (3), messages (3), anything (3), into (3), good (3), across (3), happens (3), differently (3), lot (3), organized (3), left (3), selected (3), once (3), next (3), appears (3), terminology (3), standard (3), looks (3), get (3), covered (3), will (3), gets (3), original (3), works (3), reading (3), element (3), target (3), install (3), menu (3), over (2), common (2), build (2), larger (2), projects (2), dependencies (2), making (2), testing (2), reloading (2), file (2), form (2), temporary (2), investigate (2), bug (2), write (2), basic (2), been (2), instead (2), ones (2), even (2), settings (2), view (2), them (2), choose (2), want (2), reference (2), explore (2), inside (2), sure (2), accessible (2), everyone (2), viewing (2), cases (2), afraid (2), below (2), happen (2), service (2), workers (2), app (2), manifest (2), local (2), profiler (2), improve (2), load (2), debugger (2), broken (2), export (2), short (2), affect (2), certain (2), few (2), task (2), things (2), makes (2), vast (2), writing (2), types (2), little (2), bit (2), differences (2), together (2), display (2), currently (2), toggleable (2), without (2), appear (2), horizontal (2), accessing (2), vertical (2), bar (2), particular (2), single (2), allows (2), sometimes (2), user (2), terms (2), behaves (2), similarities (2), again (2), was (2), before (2), persisted (2), those (2), running (2), files (2), runs (2), wrote (2), parsed (2), url (2), continue (2), overlays (2), annoying (2), remove (2), debugged (2), mistake (2), could (2), case (2), specified (2), targets (2), attach (2), instance (2), always (2), disabling (2), updated (2), polypane (2), paste (2), close (2), word (2), last, 2024, authors, patrick, brosset, said, evolved, years, compile, minify, bundle, their, tends, slower, techniques, known, hot, watching, automatically, deploy, simplest, require, compilation, packaging, platforms, simple, effective, fast, immediately, immediate, permanent, save, longest, consists, steps, dev, loop, difference, gives, didn, enough, space, customize, control, disabled, toggle, press, given, provides, major, here, take, refer, out, confusing, much, functionality, packed, small, did, had, individual, yes, both, discover, available, bring, modifications, collects, exists, reporter, reported, transitions, timing, delay, iteration, recorder, replayer, assistive, technology, sees, metadata, previous, far, exhaustive, correspond, focuses, applications, pwa, manifests, resources, leaks, consumption, timeline, slow, functions, rendering, set, breakpoints, through, variables, sources, replay, http, traffic, logger, environment, print, evaluate, editing, styles, applied, rules, tend, listed, mess, break, refresh, start, shouldn, become, times, relevant, complexity, leads, number, translate, worth, keeping, mind, aspects, field, involved, designing, interactive, optimizing, accommodates, well, idea, normally, familiar, something, implements, above, generalization, hopefully, down, helps, sense, mental, model, put, everything, fits, showing, zoom, ignores, present, sections, possible, per, optionally, second, side, specialized, corresponds, switch, interface, describe, consistently, activity, goal, every, tiny, details, rather, pieces, compose, allow, persist, advanced, overrides, workspaces, after, having, losing, goes, clearing, host, margin, aren, nor, saved, fetches, parses, generates, nodes, render, visually, interact, show, author, perhaps, led, interpreted, resulted, work, enter, document, lives, fetched, needs, days, crammed, lots, ads, rid, overlay, ability, appealing, non, slightly, tweak, easier, various, chances, style, logic, problem, correct, majority, others, harder, jump, ease, pain, address, bars, technologies, svg, implemented, capable, debugging, nodejs, process, embedded, native, attaching, uses, engine, navigate, still, another, instances, levels, consider, talking, blocking, block, ways, disable, installed, month, finally, normal, typically, emails, online, shopping, own, key, sufficiently, opera, arc, brave, desktop, versions, mobile, keep, unlike, hides, related, actually, probably, enable, item, enabled, anywhere, select, opens, either, current, resize, smaller, learning, front, careful, ask, provide, attempt, steal, sensitive, information, never, unless, does, scary, accident, knowing, hacked, appeared, browsing, worry, giving, privileged, computer, bad, actor, introduction, suite, starting, haven, workflows, mastodon, social, account, github, repository, category, webcomponents, productivity, personalization, perf, highlighter, frameworks, apps, guides, skip,

Text of the page (random words):
chrome or firefox or any other browser devtools is installed at the same time this also means that when your browser gets updated which for many browsers happens once a month devtools gets updated too you may therefore see differences the next time you open devtools finally this means that you can t un install devtools there are ways to disable devtools see also block devtools there are two levels to consider when talking about blocking or disabling devtools in a browser disabling devtools at the browser level for example if you have a browser for web development and read more devtools is always attached to a target devtools is always attached to a single target which often is a browser tab for example if you open a new tab in your browser and open devtools in that tab then this instance of devtools is attached to the tab devtools can be used to debug the websites that are displayed in that tab only if you navigate to different websites within the same tab then the particular instance of devtools you opened in the tab is still attached to that tab if you open another tab and open devtools in the new tab you now have two instances of devtools one for each tab in this example the target that devtools debugs is a tab devtools is however capable of debugging other types of targets for example you can attach devtools to a nodejs process or you can attach devtools to a web view that s embedded in a native application in this guide we ll only focus on attaching to browser tab targets but anything that uses a web engine to run can be debugged by devtools devtools is not standard the web runs on standard technologies html css javascript and svg for example are specified once and implemented the same way in all browsers this is not the case for devtools devtools is not specified and looks and behaves differently in all browsers for example you ll see that the devtools in safari looks different and has different features than the devtools in edge devtools is a part of the browser ui just like different browsers have different tabs or address bars they have different devtools too while this can make it harder to jump between different browser devtools to test and debug your website across browsers you ll learn in this guide that there are high level similarities that ease the pain who is devtools for the vast majority of the people who use devtools are web developers but others may find it useful too when you re writing the code for a website chances are that bugs will happen you might make a mistake in the html content or in the css style of the page or in the javascript logic devtools can help you investigate and fix those bugs with devtools you can inspect the code that the browser is running to display your page find what the problem is and then correct it in your source code devtools also allows you to make changes to the page that s being debugged for example if you made a css mistake in the color of an element you can change the element s color to test a fix because of this ability to make changes to a page devtools might be appealing to non web developers too for example you could use devtools to slightly tweak a web page and make it easier to read you could remove various elements or change the text size and color see also remove annoying page overlays and other elements a lot of websites these days get covered with overlays and crammed with lots of ads and other things that make it hard to just read the content of the page to get rid of an annoying overlay or any o read more continue reading to learn more about how these changes are made and what they affect how devtools works devtools debugs the runtime version of your webpage to understand how devtools works you first need to understand how browsers work a little bit when you enter a url to a webpage in your browser the document that lives at that url and its dependencies are fetched and parsed by the browser the entire code that the webpage needs is run and the page is rendered into the browser tab if you re the author of this webpage the html css and perhaps javascript code that you wrote in your text editor is what led to the page being rendered in the browser but the code was parsed interpreted and run by the browser which resulted in the page being displayed what runs in the browser for your page to show up is different than the code you wrote it s an runtime version of it the runtime version of your webpage is what devtools debugs devtools doesn t debug your original source code for example when the browser fetches the html content of your web page it parses it and generates a tree of dom nodes from it the dom tree is what is then used to render the page visually in the browser devtools let s you see and interact with the dom tree not with the original html source code devtools can t change your source code because devtools debugs the runtime version of your webpage instead of the original source code the changes you make in devtools are not saved to your source code and are not persisted when you reload the page devtools can t change your source files in your text editor or on your web server devtools is only part of the web browser and doesn t have access to the text editor that you used to write the code it also doesn t have access to the web server that you re using to host your website when you make a change with devtools to some css color or margin or to some text on the page those changes are only made to the rendered web page that s running in the browser the changes aren t made to your source code nor to the files in your web server changes made in devtools are not persisted reloading the page in the browser after having made changes to it by using devtools will result in losing the changes again the changes are only made to the runtime version of the page when you reload the page the browser goes to the server again gets the source code for the page and displays it clearing anything that was displayed in the same tab before note there are specific features of devtools e g workspaces and local overrides that allow you to persist changes to your source code these features are more advanced and not covered in this guide the ui of devtools devtools is not standard and it therefore looks and behaves differently depending on the browser you choose to use for your web development activity however there are high level similarities between the devtools of different browsers in this section we ll look at the main ui elements of devtools and how they are organized the goal of this section isn t to understand every tiny details of the ui but rather to get a high level understanding of the main pieces that compose the devtools ui terminology devtools has a complex user interface because it has a lot of different features because of this there are many different terms that are used to describe its ui like panel section drawer tool tab and more in this guide we use the following terms consistently toolbar the horizontal sometimes vertical bar at the top of devtools that contains tabs tab a single tab within the toolbar which allows to switch between different tools panel the main area that corresponds to a tab where the content of a tool is displayed tool a feature of devtools specialized in a particular web development task which appears inside a panel sidebar a vertical bar on the left or right side of a tool s content within a panel drawer a horizontal toggleable area which appears at the bottom and optionally contains a second toolbar for accessing other tools high level ui description devtools appears next to the rendered webpage in a browser tab it might appear to the right of the webpage or it might appear at the bottom of the webpage now let s focus on just devtools the following screenshot shows devtools only without the rendered webpage next to it or the browser ui around them the screenshot shows the toolbar at the top of devtools with tabs one tab per tool the bottom part contains a panel that displays the content of the currently selected tool it s also possible for two tools to be visible at once with one in the panel and one in a toggleable drawer at the bottom often the tool displayed in the drawer is the console tool which is used to log messages and run javascript code let s zoom in one more level and focus on the content of the tool that s displayed in the panel the following screenshot ignores the toolbar and drawer and only shows the content of the panel where a tool is displayed each tool is different and they don t all look the same but the following screenshot shows the main elements that are often present in a tool a sidebar on the left with tabs used to display different sections of the tool and a main content area on the right which displays the content of the currently selected section now let s put it all back together in one screenshot so you can see how everything fits together the screenshot shows the entire browser window with a rendered webpage on the left and devtools on the right devtools has a toolbar with tabs a panel showing the selected tool and a drawer area at the bottom the panel shows a tool which contains a sidebar and a main content area this might look like a lot of ui elements and hard to understand at first but hopefully the way we ve broken it down step by step helps make sense of the ui and help form a mental model of how it s organized differences between browsers the ui of devtools is something that each browser implements a little bit differently the high level ui description above is a generalization of the ui of devtools across browsers it s a good idea to test your website across different browsers to find bugs that may manifest on certain browsers only when this happens you ll need to use the devtools of the browser where the bug happens therefore even if this browser isn t the one you normally use it s good to be familiar with its devtools the tools one of the aspects of devtools that makes it complex is that it contains many different tools the web development field is vast and there are many different tasks involved with it such as designing the look of a website writing the code that makes it interactive optimizing its performance or making sure it s accessible to everyone devtools contains tools that help with all of these tasks and more on top of this devtools accommodates for different types of users as well this complexity leads to a high number of tools and features which can translate into a complex ui but it s worth keeping a few things in mind you don t need to use all the tools all the time you can focus on just a few tools that are relevant to the task you re working on you shouldn t be afraid to explore the tools that you don t know yet you might find that they become useful to you at certain times devtools doesn t mess up with your source code all the changes you make in devtools are temporary and don t affect your source code you can t break anything by using devtools just refresh the page and start over the main tools the tools below tend to be the most used ones each tool is listed with a short description of what it s useful for tool description use cases specific browser note elements displays the dom tree and applied css rules find and fix html and css bugs by editing the dom and css styles this tool is called inspector in firefox console javascript environment to print messages and evaluate code log messages and debug javascript issues network http network traffic logger improve load performance debug broken requests export requests replay requests sources javascript debugger set breakpoints step through code inspect variables this tool is called debugger in firefox performance performance profiler improve load and runtime performance find slow javascript functions or rendering issues this tool is called timeline in safari memory memory profiler find memory leaks and high memory consumption issues application displays local storage service workers web app manifests and other resources debug storage web applications and pwa issues in firefox the application tool only focuses on service workers and web app manifest use the storage tool to inspect and edit storage safari also has a storage tool to inspect and edit storage more tools the previous list of tools is far from being exhaustive they re the most used tools because they correspond to the tasks that web developers most often need to do but they also happen to be the tools that are usually opened by default in the devtools main toolbar don t be afraid to look around for more tools to use the list below contains more tools that you might find useful tool description use cases specific browser note accessibility displays accessibility metadata about the page make sure your website is accessible to everyone by viewing the page the way assistive technology sees it this tool is a separate tab in the main toolbar only in firefox in chrome and edge it s a sidebar tab inside the elements tool animations web css animations recorder replayer debug web animations css animations and css transitions issues such as timing delay or iteration in firefox this tool is a sidebar tab in the inspector tool the tool doesn t exist in safari issues browser reported issues find and fix performance security accessibility and other browser reporter issues this tool only exists in edge and chrome and these two browsers don t log the same issues in it firefox displays issues in the console tool changes collects css changes made in devtools bring back css modifications made within the elements or inspector tool to the page this tool is a separate tab in chrome and edge and a sidebar tab in the inspector tool in firefox there are many more tools available see also discover all the tools devtools is confusing there s so much functionality packed in such a small ui did you know that chrome devtools had more than 30 individual tools yes that s right 30 it s hard for both new users read more take time to explore the tools that you don t know yet and refer to the documentation of each browser devtools to find out more see also find devtools reference documentation if you want to learn more about what other tools exist in a browser or what features a given tool provides you can find reference documentation from all the major browsers here firefox developer t read more where to find the tools firefox in firefox most tools are displayed as tabs in the main toolbar at the top of devtools depending on the size of the devtools window not all tabs may be visible click the button at the right of the toolbar to see the hidden tabs some tools may also be disabled from the devtools settings to view the entire list of tools and toggle them press f1 to open the settings panel and then choose the tools you want to see from the default developer tools list chrome in chrome most tools are also displayed as tabs in the main toolbar at the top of devtools depending on the size of...