diff --git a/tag/alltips/index.html b/tag/alltips/index.html index c98d46d7..025c3d7d 100644 --- a/tag/alltips/index.html +++ b/tag/alltips/index.html @@ -103,43 +103,6 @@

171 Alltips tips

-
  • - Visualize the screen reader order for elements within the page - The source order viewer in Microsoft Edge, showing numbered boxes around elements. -
    - Edge has an accessibility tab within the elements panel that, among other things, lets you visualize the order a screen reader will encounter elements on a page. This is determined by the order of ele... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Visualize the tabbing order on the page The tabbing order highlighter in Firefox, showing numbered boxes around focusable elements. @@ -253,19 +189,19 @@

    171 Alltips tips

    • -
  • - Use full browser window for device emulation - Animation showing device emulation and how to undock the Developer Tools into an own window. +
  • + Visualize the screen reader order for elements within the page + The source order viewer in Microsoft Edge, showing numbered boxes around elements.
    - Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a device with limited resolution as the emulated device needs to be zoomed down to fit the screen as a l... - Read more + Edge has an accessibility tab within the elements panel that, among other things, lets you visualize the order a screen reader will encounter elements on a page. This is determined by the order of ele... + Read more
    Categories: Supported by:
    • @@ -350,17 +278,20 @@

    171 Alltips tips

    -
  • - Re-use scripts as snippets - The snippets editor in the Sources tool with a snippet open in the editor. +
  • + Console.log() for the web with logpoints + Setting a logpoint in the sources tool.
    - The Console is great to write short JavaScript expressions that read from the document or manipulate it. But it's also a terrible editor. -You can actually use a full editor in Edge, Chrome, and Safari... - Read more + Using the console to log some information is a very common way to debug your JavaScript. But you can also log information in any web site using Logpoints in the sources panel. +Here's how to do it: +I... + Read more
    Categories: Supported by: @@ -372,6 +303,10 @@

    171 Alltips tips

    chrome +
  • + + firefox +
  • safari @@ -380,22 +315,18 @@

    171 Alltips tips

    • -
  • - Understand when the Console opens in the main panel and in the drawer - DevTools, with just one tool displayed, the Elements tool +
  • + Re-use scripts as snippets + The snippets editor in the Sources tool with a snippet open in the editor.
    - Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other tools), and sometimes in a split pane at the bottom, below the main tool? -If you've been confused b... - Read more + The Console is great to write short JavaScript expressions that read from the document or manipulate it. But it's also a terrible editor. +You can actually use a full editor in Edge, Chrome, and Safari... + Read more
    Categories: Supported by:
    • -
  • - Use DevTools in another language - The settings panel in Edge showing a checkbox to match DevTools with the browser language. +
  • + Use full browser window for device emulation + Animation showing device emulation and how to undock the Developer Tools into an own window.
    - If you want to use DevTools in another language than English, you can do it across all major browsers. -In Firefox, DevTools will always match the language of the browser, so if you downloaded Firefox... - Read more + Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a device with limited resolution as the emulated device needs to be zoomed down to fit the screen as a l... + Read more
    Categories: Supported by: -
    -
    • - -
  • - Understand flexbox item sizing - Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram. -
    - Flexbox is a great way to easily distribute elements and empty space in a row or a column, and create interesting layouts. -It only takes a couple of CSS properties to create nice layouts that automati... - Read more -
    -
    - Categories: - - Supported by: -
    • @@ -554,47 +460,56 @@

    171 Alltips tips

    -
  • - Tweak css grid and flexbox alignment properties - The grid editor in the Styles pane of Microsoft Edge. +
  • + Use DevTools in another language + The settings panel in Edge showing a checkbox to match DevTools with the browser language.
    - Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties. -Head over to the Elements panel -Select an element that is either a grid or flexbox container -In th... - Read more + If you want to use DevTools in another language than English, you can do it across all major browsers. +In Firefox, DevTools will always match the language of the browser, so if you downloaded Firefox... + Read more
    Categories: Supported by:
    • -
  • - Throttle the network speed to test your website on slower connections - The Network panel in Edge showing the network throttling drop-down. +
  • + Understand when the Console opens in the main panel and in the drawer + DevTools, with just one tool displayed, the Elements tool
    - While you may develop your website on a fast network connection at home or at work, your users may not be able to use it with an equally fast connection. Perhaps they're in a moving car, or on the sub... - Read more + Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other tools), and sometimes in a split pane at the bottom, below the main tool? +If you've been confused b... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Understand flexbox item sizing + Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram. +
    + Flexbox is a great way to easily distribute elements and empty space in a row or a column, and create interesting layouts. +It only takes a couple of CSS properties to create nice layouts that automati... + Read more +
    +
    + Categories: + + Supported by: +
    @@ -646,19 +583,20 @@

    171 Alltips tips

    • -
  • - Test your PWA protocol handlers - Microsoft Edge, with the Application tool opened on the side, showing the Protocol Handlers section. +
  • + Tweak css grid and flexbox alignment properties + The grid editor in the Styles pane of Microsoft Edge.
    - Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protocols (such as mailto, geo, or web+foo). This is a great capability that makes it possible for installe... - Read more + Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties. +Head over to the Elements panel +Select an element that is either a grid or flexbox container +In th... + Read more
    Categories: Supported by:
    • -
  • - Take high-resolution screenshots of web pages - Firefox, with DevTools opened, and the Console tool visible, showing that :screenshot command +
  • + Throttle the network speed to test your website on slower connections + The Network panel in Edge showing the network throttling drop-down.
    - Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at the bottom of this page for more tips on that). But sometimes, the resulting screenshots aren't hig... - Read more + While you may develop your website on a fast network connection at home or at work, your users may not be able to use it with an equally fast connection. Perhaps they're in a moving car, or on the sub... + Read more
    Categories: Supported by:
    @@ -728,6 +672,33 @@

    171 Alltips tips

    • +
  • + Test your PWA protocol handlers + Microsoft Edge, with the Application tool opened on the side, showing the Protocol Handlers section. +
    + Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protocols (such as mailto, geo, or web+foo). This is a great capability that makes it possible for installe... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Take screenshots of your site in a device frame Screenshot of the devtoolstips.org website in an iPhone frame @@ -754,22 +725,28 @@

    171 Alltips tips

    • -
  • - Quickly spot out-of-viewport elements - Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle. +
  • + Take high-resolution screenshots of web pages + Firefox, with DevTools opened, and the Console tool visible, showing that :screenshot command
    - Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser viewport. When they do, it can be really hard to find them in DevTools. Indeed, the DOM tree in the Ele... - Read more + Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at the bottom of this page for more tips on that). But sometimes, the resulting screenshots aren't hig... + Read more
    Categories: Supported by:
    • +
  • + Quickly spot out-of-viewport elements + Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle. +
    + Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser viewport. When they do, it can be really hard to find them in DevTools. Indeed, the DOM tree in the Ele... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Simulate pseudo CSS classes The :hov button and the pseudo-class panel in Chrome DevTools @@ -926,52 +926,52 @@

    171 Alltips tips

    • -
  • - Simulate the Window Controls Overlay feature for PWA - Edge, DevTools is opened, the Application tool shows the WCO section, and the WCO overlay is simulated in the page +
  • + Simulate multiple devices that are kept in sync + Polypane showing three different devices side-by-side.
    - If you're building a desktop PWA, you might want to use the Window Controls Overlay (WCO) feature to make your app look more native. With WCO, you gain control over the entire surface area of the inst... - Read more + Instead of simulating devices one by one and switching between them, Polypane supports testing on multiple simulated devices and viewports at the same time. +It lets you test different simulated device... + Read more
    Categories: Supported by:
    • -
  • - Simulate multiple devices that are kept in sync - Polypane showing three different devices side-by-side. +
  • + Simulate the Window Controls Overlay feature for PWA + Edge, DevTools is opened, the Application tool shows the WCO section, and the WCO overlay is simulated in the page
    - Instead of simulating devices one by one and switching between them, Polypane supports testing on multiple simulated devices and viewports at the same time. -It lets you test different simulated device... - Read more + If you're building a desktop PWA, you might want to use the Window Controls Overlay (WCO) feature to make your app look more native. With WCO, you gain control over the entire surface area of the inst... + Read more
    Categories: Supported by:
    @@ -1037,22 +1037,36 @@

    171 Alltips tips

    • -
  • - Show web vitals - The web vitals tooltip in Polypane showing a good CLS, LCP and FCP score and a FID score that needs improvement. +
  • + Send feedback, ask for features and report bugs + A feedback illustration showing a stick figure with a speech bubble
    - Web vitals are a set of metrics that help you determine how well-built your page is. You can learn more about them here. These scores can be obtained with various online checks like PageSpeed Insights... - Read more + Browser vendors depend on your feedback to build the right tools for you. Without hearing from you all about what problems you have, or what features you lack, they can't take the right decisions abo... + Read more
    Categories: Supported by:
    • -
  • - Send feedback, ask for features and report bugs - A feedback illustration showing a stick figure with a speech bubble +
  • + Show web vitals + The web vitals tooltip in Polypane showing a good CLS, LCP and FCP score and a FID score that needs improvement.
    - Browser vendors depend on your feedback to build the right tools for you. Without hearing from you all about what problems you have, or what features you lack, they can't take the right decisions abo... - Read more + Web vitals are a set of metrics that help you determine how well-built your page is. You can learn more about them here. These scores can be obtained with various online checks like PageSpeed Insights... + Read more
    Categories: Supported by:
    • -
  • - Know which of the font in a font-family was actually used - Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined -
    - The CSS font-family property let's you define a comma-separated list of fonts that the browser engine should choose from (in priority order) to render text. For example, with font-family: "Gill S... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Select elements with pointer-events:none by holding Shift Animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed. @@ -1192,6 +1171,27 @@

    171 Alltips tips

    • +
  • + Know which of the font in a font-family was actually used + Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined +
    + The CSS font-family property let's you define a comma-separated list of fonts that the browser engine should choose from (in priority order) to render text. For example, with font-family: "Gill S... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • See the viewport size Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage @@ -1384,18 +1384,18 @@

    171 Alltips tips

    • -
  • - Take a screenshot of part of a webpage from the Command Menu - Edge, with DevTools opened, and the Command menu showing the list of screenshot commands +
  • + Scroll an element into view + Animation showing how the page is scrolled to reveal the selected element.
    - The Command menu in Edge and Chrome is a great way to do many of the things you can do in DevTools without having to navigate the UI. -Csaba Kissi shared a great tip on Twitter about the Command menu:... - Read more -
    + If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's easy to get lost, not knowing where the selected element is in the page. +DevTools has got your back... + Read more +
    Categories: Supported by:
    • -
  • - Scroll an element into view - Animation showing how the page is scrolled to reveal the selected element. +
  • + Take a screenshot of part of a webpage from the Command Menu + Edge, with DevTools opened, and the Command menu showing the list of screenshot commands
    - If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's easy to get lost, not knowing where the selected element is in the page. -DevTools has got your back... - Read more + The Command menu in Edge and Chrome is a great way to do many of the things you can do in DevTools without having to navigate the UI. +Csaba Kissi shared a great tip on Twitter about the Command menu:... + Read more
    Categories: Supported by:
    • @@ -1474,31 +1474,6 @@

    171 Alltips tips

    -
  • - Query object instances and holders from the console - The console in Safari, showing the result of queryInstances(app.TodoItem). -
    - All browser DevTools have a few built-in functions in the console to do things like get the current element, or copy a string. But Safari exposes 2 nice built-in functions: -queryInstances -queryHolder... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Replay a XHR request Chrome's Network tool, with the Replay XHR contextual menu item @@ -1642,37 +1617,24 @@

    171 Alltips tips

    • -
  • - Start your HTML and CSS prototypes in the browser directly - Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made. +
  • + Query object instances and holders from the console + The console in Safari, showing the result of queryInstances(app.TodoItem).
    - Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the website I'm working on. Maybe I need a new layout or component and I'm not sure yet how to do it. -In th... - Read more + All browser DevTools have a few built-in functions in the console to do things like get the current element, or copy a string. But Safari exposes 2 nice built-in functions: +queryInstances +queryHolder... + Read more
    Categories: Supported by:
    • -
  • - Prototype content changes with designMode - Animation of editable web page with designMode on. +
  • + Start your HTML and CSS prototypes in the browser directly + Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made.
    - When creating or modifying a design prototype for the web, you may want to quickly edit content in the browser without having to find the relevant code. -When you turn on designMode for the document or... - Read more + Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the website I'm working on. Maybe I need a new layout or component and I'm not sure yet how to do it. +In th... + Read more
    Categories: Supported by:
    • @@ -1786,40 +1744,6 @@

    171 Alltips tips

    -
  • - Paste multiple CSS declarations at once - Animation showing how pasting several declarations in a CSS rule in DevTools creates them all. -
    - You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you can actually paste several declarations at once too! -For example, try copying the following entire CSS... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Persist console messages across page navigations and reloads Edge devtools' console showing the settings panel at the top, with the "perserve log" box checked. @@ -1857,31 +1781,32 @@

    171 Alltips tips

    • -
  • - Draw a box around all elements to debug your CSS and page structure - Animation showing how adding the rule in the styles pane if Chrome DevTools outlines all elements in the page. +
  • + Prototype content changes with designMode + Animation of editable web page with designMode on.
    - Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understanding the page structure, finding overflow bugs or understand why elements are being pushed away for... - Read more + When creating or modifying a design prototype for the web, you may want to quickly edit content in the browser without having to find the relevant code. +When you turn on designMode for the document or... + Read more
    Categories: Supported by:
    • -
  • - Move panels to re-arrange them - Animation in Edge DevTools showing the move to top/bottom menus. +
  • + Paste multiple CSS declarations at once + Animation showing how pasting several declarations in a CSS rule in DevTools creates them all.
    - Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs. -There are 2 ways that you can re-arrange panels in DevTools today: dragging th... - Read more + You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you can actually paste several declarations at once too! +For example, try copying the following entire CSS... + Read more
    Categories: Supported by:
    • -
  • - Name evaluated files with the sourceURL pragma - Firefox DevTools, the sourceURL pragma was used when evaluating some code in the Console, and a new file now appears in the Debugger tool, named after the string provided in the sourceURL pragma +
  • + Draw a box around all elements to debug your CSS and page structure + Animation showing how adding the rule in the styles pane if Chrome DevTools outlines all elements in the page.
    - If you insert JavaScript code in a webpage by using the eval() function, or inline <script> tags, you can use the sourceURL pragma to give them a name in DevTools. -For example, when using eval()... - Read more + Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understanding the page structure, finding overflow bugs or understand why elements are being pushed away for... + Read more
    Categories: Supported by:
    • @@ -2005,20 +1935,18 @@

    171 Alltips tips

    -
  • - Monitor all events dispatched on an element - Animation showing how events get automatically logged when using the monitorEvents function. +
  • + Name evaluated files with the sourceURL pragma + Firefox DevTools, the sourceURL pragma was used when evaluating some code in the Console, and a new file now appears in the Debugger tool, named after the string provided in the sourceURL pragma
    - You can use the monitorEvents global function in the Console panel to log all of the events dispatched on a particular element. -Select an element in the Elements panel. -Go to the Console. -Type monito... - Read more + If you insert JavaScript code in a webpage by using the eval() function, or inline <script> tags, you can use the sourceURL pragma to give them a name in DevTools. +For example, when using eval()... + Read more
    Categories: @@ -2031,6 +1959,14 @@

    171 Alltips tips

    chrome +
  • + + firefox + +
  • + + safari +
    • @@ -2073,65 +2009,56 @@

    171 Alltips tips

    -
  • - Manipulate global objects on page load, before other scripts run - The Sources tab in Safari's WebInspector, showing the Add resource button and the Bootstrap script type +
  • + Move panels to re-arrange them + Animation in Edge DevTools showing the move to top/bottom menus.
    - When a page loads, and all of its global objects are ready, but before the JavaScript code of the page actually kicks-in, is a great time to inject debugging code. For example, it might be useful to r... - Read more + Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs. +There are 2 ways that you can re-arrange panels in DevTools today: dragging th... + Read more
    Categories: Supported by: -
    -
    • - -
  • - Measure arbitrary distances in the page - Firefox with DevTools docked on the side. The measure tool icon is in the DevTools toolbar and has been clicked. An arbitrary area has been defined on the page and its dimensions are displayed in a tooltip -
    - Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance between two things? -If you do, Firefox DevTools may be the right tool for the job. -First, enable the... - Read more -
    -
    - Categories: - - Supported by: -
    • -
  • - Cut down on console noise using live expressions - The eye button in DevTools +
  • + Monitor all events dispatched on an element + Animation showing how events get automatically logged when using the monitorEvents function.
    - Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you flood it with information. Secondly, it can impact the performance of your product. And last but no... - Read more + You can use the monitorEvents global function in the Console panel to log all of the events dispatched on a particular element. +Select an element in the Elements panel. +Go to the Console. +Type monito... + Read more
    Categories: Supported by:
    • -
  • - List all supported console functions - Chrome, with the Console panel opened on the side in DevTools, showing the command result, which is an object containing a list of functions such as assert, clear, debug. +
  • + Measure arbitrary distances in the page + Firefox with DevTools docked on the side. The measure tool icon is in the DevTools toolbar and has been clicked. An arbitrary area has been defined on the page and its dimensions are displayed in a tooltip
    - You've probably already used console.log() in your code to print debugging values to the Console tool in DevTools. But the console namespace actually has many other functions too! -To list them all, op... - Read more + Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance between two things? +If you do, Firefox DevTools may be the right tool for the job. +First, enable the... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Manipulate global objects on page load, before other scripts run + The Sources tab in Safari's WebInspector, showing the Add resource button and the Bootstrap script type +
    + When a page loads, and all of its global objects are ready, but before the JavaScript code of the page actually kicks-in, is a great time to inject debugging code. For example, it might be useful to r... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • + +
  • + Cut down on console noise using live expressions + The eye button in DevTools +
    + Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you flood it with information. Secondly, it can impact the performance of your product. And last but no... + Read more +
    +
    + Categories: + + Supported by: +
    • @@ -2243,26 +2209,52 @@

    171 Alltips tips

    -
  • - List all event listeners on the entire page - Chrome, with the devtoolstips.org website loaded, and the DevTools Console on the side, showing the result of the above script +
  • + Jump from a label `for` attribute to the linked input (and more) + Animation showing the Firefox DevTools Inspector panel, the mouse clicks the for attribute of a label element and the selection jumps to the related input element.
    - When you don't know a codebase, it might be hard to know where to get started, and what events are being listened to by which elements. -The Console tool, in Chromium-based browsers, comes with a nice... - Read more + In Firefox, you can jump from an element that references the ID attribute of an other element, to that other element, by Cmd+clicking (or Ctrl+clicking) the attribute. +Here is a common example for whe... + Read more
    Categories: + Supported by: + +
    +
    • + +
  • + List all supported console functions + Chrome, with the Console panel opened on the side in DevTools, showing the command result, which is an object containing a list of functions such as assert, clear, debug. +
    + You've probably already used console.log() in your code to print debugging values to the Console tool in DevTools. But the console namespace actually has many other functions too! +To list them all, op... + Read more +
    +
    + Categories: + Supported by:
    • -
  • - Jump from a label `for` attribute to the linked input (and more) - Animation showing the Firefox DevTools Inspector panel, the mouse clicks the for attribute of a label element and the selection jumps to the related input element. +
  • + List all event listeners on the entire page + Chrome, with the devtoolstips.org website loaded, and the DevTools Console on the side, showing the result of the above script
    - In Firefox, you can jump from an element that references the ID attribute of an other element, to that other element, by Cmd+clicking (or Ctrl+clicking) the attribute. -Here is a common example for whe... - Read more + When you don't know a codebase, it might be hard to know where to get started, and what events are being listened to by which elements. +The Console tool, in Chromium-based browsers, comes with a nice... + Read more
    Categories: Supported by:
    @@ -2427,23 +2427,18 @@

    171 Alltips tips

    • -
  • - Highlight all the elements that a CSS rule matches - Animation showing how hovering over selectors in chrome highlights the matching elements in the page. +
  • + Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100 + Animation of the Styles panel in Edge showing how numbers can be changed in various increments.
    - When you want to know which elements a given CSS rule will apply to, in addition to the currently selected element, you can: -In Firefox: -In the Style Editor panel: hover over any rule selector for s... - Read more + When playing with styling or layout code in DevTools, it's useful to be able to change widths, margins, and other CSS number values quickly. +Manually entering new numbers works of course, but it gets... + Read more
    Categories: Supported by:
    • -
  • - Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100 - Animation of the Styles panel in Edge showing how numbers can be changed in various increments. +
  • + Ignore JavaScript code to ease debugging + Firefox ignore line contextual menu option, displayed on a few lines of selected JavaScript code.
    - When playing with styling or layout code in DevTools, it's useful to be able to change widths, margins, and other CSS number values quickly. -Manually entering new numbers works of course, but it gets... - Read more + Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that call each other. +What's even worse is when a lot of this code isn't even yours. This can happen whe... + Read more
    Categories: Supported by:
    • -
  • - Ignore JavaScript code to ease debugging - Firefox ignore line contextual menu option, displayed on a few lines of selected JavaScript code. +
  • + Highlight all the elements that a CSS rule matches + Animation showing how hovering over selectors in chrome highlights the matching elements in the page.
    - Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that call each other. -What's even worse is when a lot of this code isn't even yours. This can happen whe... - Read more + When you want to know which elements a given CSS rule will apply to, in addition to the currently selected element, you can: +In Firefox: +In the Style Editor panel: hover over any rule selector for s... + Read more
    Categories: Supported by: -
    -
    • - -
  • - Hide resources loaded by extensions in the Network panel - The Network panel in Chrome DevTools showing the pattern used in the filter input box. -
    - If you want to hide scripts and other resources loaded by browser extensions in the Network panel, use the -scheme:chrome-extension pattern in the filter input box. -Credits go to Sunil for his post on... - Read more -
    -
    - Categories: - - Supported by: -
    • @@ -2634,17 +2608,18 @@

    171 Alltips tips

    -
  • - Highlight the effect of individual CSS properties on hover - Animation showing a flex layout in the page, and the cursor moving over various properties in the Styles pane. +
  • + Hide or pin the information tooltip while inspecting page elements + Chrome, with a webpage and DevTools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, which is highlighted, but the information tooltip is not displayed.
    - How do certain CSS properties apply to the page isn't always an easy question to answer. -While some properties might be considered simple, others have complex effects that depend on other factors. Pro... - Read more + When selecting elements from the page using the inspect tool, the hovered elements get highlighted, and an information tooltip follows your mouse around and gives you information about the hovered ele... + Read more
    Categories:
    • -
  • - Hide or pin the information tooltip while inspecting page elements - Chrome, with a webpage and DevTools opened to the side. The inspect mode is on, the mouse is hovering an element in the webpage, which is highlighted, but the information tooltip is not displayed. +
  • + Hide resources loaded by extensions in the Network panel + The Network panel in Chrome DevTools showing the pattern used in the filter input box.
    - When selecting elements from the page using the inspect tool, the hovered elements get highlighted, and an information tooltip follows your mouse around and gives you information about the hovered ele... - Read more + If you want to hide scripts and other resources loaded by browser extensions in the Network panel, use the -scheme:chrome-extension pattern in the filter input box. +Credits go to Sunil for his post on... + Read more
    Categories: Supported by:
    • @@ -2716,81 +2688,27 @@

    171 Alltips tips

    -
  • - See the size of the transferred data for images, scripts, or other resources - The Network tool in Chrome, with the transferred size highlighted +
  • + Highlight the effect of individual CSS properties on hover + Animation showing a flex layout in the page, and the cursor moving over various properties in the Styles pane.
    - To know how much data your website transfers between the server and the client to display images, or scripts, or anything else: -Open the Network tool. -Refresh the page to make sure the list of req... - Read more + How do certain CSS properties apply to the page isn't always an easy question to answer. +While some properties might be considered simple, others have complex effects that depend on other factors. Pro... + Read more
    Categories: Supported by: -
    -
    • - -
  • - Get detached DOM elements to investigate memory leaks - The Detached Elements panel in Edge, with the Memory panel next to it. -
    - Memory leaks can quickly become a big problem for long-running applications, and a common source of memory leaks is detached DOM elements (elements that are no longer attached to the DOM tree). -It's u... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • - -
  • - Get contextual DevTools help - Animation of the DevTools tooltips in Edge. -
    - Edge has a feature called the DevTools Tooltips that gives you help about the different tools right inside of DevTools. -There are several ways to enable it: -Press ctrl+shift+H (or cmd+shift+H on mac)... - Read more -
    -
    - Categories: - - Supported by: -
    • -
  • - Autofill forms for testing - Animation of a form being filled after selecting "autofill" in the context menu, followed by the form being emptied after choosing "Clear form" in the context menu. +
  • + See the size of the transferred data for images, scripts, or other resources + The Network tool in Chrome, with the transferred size highlighted
    - In Polypane you can right-click any form on the page and select Autofill form to add dummy values to all input elements. This prevents you from having to go field-by-field to fill in all required fiel... - Read more + To know how much data your website transfers between the server and the client to display images, or scripts, or anything else: +Open the Network tool. +Refresh the page to make sure the list of req... + Read more
    Categories: Supported by:
    @@ -2895,28 +2827,69 @@

    171 Alltips tips

    • -
  • - Force PWA periodic background syncs - The Application panel in Edge showing the periodic sync input and buttons. +
  • + Get detached DOM elements to investigate memory leaks + The Detached Elements panel in Edge, with the Memory panel next to it.
    - The periodic background sync API, available to PWAs is a great way to fetch new content while the user isn't on the site, and while they have access to the network, to make sure they have the latest c... - Read more + Memory leaks can quickly become a big problem for long-running applications, and a common source of memory leaks is detached DOM elements (elements that are no longer attached to the DOM tree). +It's u... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Get contextual DevTools help + Animation of the DevTools tooltips in Edge. +
    + Edge has a feature called the DevTools Tooltips that gives you help about the different tools right inside of DevTools. +There are several ways to enable it: +Press ctrl+shift+H (or cmd+shift+H on mac)... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • + +
  • + Autofill forms for testing + Animation of a form being filled after selecting "autofill" in the context menu, followed by the form being emptied after choosing "Clear form" in the context menu. +
    + In Polypane you can right-click any form on the page and select Autofill form to add dummy values to all input elements. This prevents you from having to go field-by-field to fill in all required fiel... + Read more +
    +
    + Categories: + + Supported by: +
    @@ -2958,6 +2931,33 @@

    171 Alltips tips

    • +
  • + Force PWA periodic background syncs + The Application panel in Edge showing the periodic sync input and buttons. +
    + The periodic background sync API, available to PWAs is a great way to fetch new content while the user isn't on the site, and while they have access to the network, to make sure they have the latest c... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Force execution, skipping breakpoints, when paused The Sources tool in Edge, showing the Force script execution button @@ -3045,28 +3045,6 @@

    171 Alltips tips

    • -
  • - Find the offset parent of an element - Polypane showing an inspected element with the Debug tab open. The Offset parent entry is highlighted. -
    - To know what an element is offset against horizontally or vertically (Which you do with position:relative and a left, top or inset value) you need to know its offset parent. -The offset parent of an el... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Find why a CSS property is overridden Firefox DevTools, showing the Inspector tool and the Rules panel. The filter icon was clicked next to the display property, and the other display properties from other rules are highlighted. @@ -3102,24 +3080,21 @@

    171 Alltips tips

    • -
  • - Find HTML parsing errors - The View-Source page in Firefox, with a stray em closing tag highlighted in red, with a tooltip. +
  • + Find the offset parent of an element + Polypane showing an inspected element with the Debug tab open. The Offset parent entry is highlighted.
    - DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns out that it has one trick up its sleeves that other tools don't, at least in Firefox and Polypane.... - Read more + To know what an element is offset against horizontally or vertically (Which you do with position:relative and a left, top or inset value) you need to know its offset parent. +The offset parent of an el... + Read more
    Categories: Supported by:
    • -
  • - Find memory leaks by comparing heap snapshots - Microsoft Edge, with a demo webpage, and DevTools on the side with the Memory tool showing 2 snapshots have been recorded -
    - Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements tool in Edge, see Get detached DOM elements to investigate memory leaks. -Memory leaks are hard to find... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • - -
  • - Find inactive CSS styles - Part of the Rules panel in Firefox, showing a greyed out flex-grow property, with a tooltip saying that the property is inactive because the selected element is not a flex item. +
  • + Find memory leaks by comparing heap snapshots + Microsoft Edge, with a demo webpage, and DevTools on the side with the Memory tool showing 2 snapshots have been recorded
    - Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can be frustrating. -Indeed, there are many cases where a CSS declaration has no effect on an element. On... - Read more + Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements tool in Edge, see Get detached DOM elements to investigate memory leaks. +Memory leaks are hard to find... + Read more
    Categories: Supported by:
    • -
  • - Find your web component's custom element code - Animation showing the custom button in Firefox's inspector and that clicking on it goes to the debugger. +
  • + Find inactive CSS styles + Part of the Rules panel in Firefox, showing a greyed out flex-grow property, with a tooltip saying that the property is inactive because the selected element is not a flex item.
    - In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to go straight to the custom element's JavaScript source code.... - Read more + Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can be frustrating. +Indeed, there are many cases where a CSS declaration has no effect on an element. On... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Find HTML parsing errors + The View-Source page in Firefox, with a stray em closing tag highlighted in red, with a tooltip. +
    + DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns out that it has one trick up its sleeves that other tools don't, at least in Firefox and Polypane.... + Read more +
    +
    + Categories: + + Supported by: +
    • @@ -3306,6 +3283,29 @@

    171 Alltips tips

    +
  • + Find your web component's custom element code + Animation showing the custom button in Firefox's inspector and that clicking on it goes to the debugger. +
    + In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to go straight to the custom element's JavaScript source code.... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Find and export CSS changes The Changes panel in Firefox showing a diff-like view of all the CSS changes. @@ -3341,28 +3341,6 @@

    171 Alltips tips

    • -
  • - Find broken links - Polypane, with the outline panel open. Two of the links show a 404 error code -
    - The link to X on page Y doesn't work is probably a bug report you've received at some point. But how do you find these broken links before someone else does? -In Polypane, the Outline Panel will show y... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Find all images without alternative text The output of the console.table command from above shown in the Firefox DevTools console. @@ -3477,31 +3455,76 @@

    171 Alltips tips

    • -
  • - Expand DOM nodes recursively - Animation showing right-clicking on a node in Chrome's Elements panel and choosing "expand recursively". +
  • + Find broken links + Polypane, with the outline panel open. Two of the links show a 404 error code
    - You can expand all descendants under a given DOM node in one go, to avoid having to expand each node one by one, which may take a while. -In Chrome and Edge -Right-click on the node you want to expand... - Read more + The link to X on page Y doesn't work is probably a bug report you've received at some point. But how do you find these broken links before someone else does? +In Polypane, the Outline Panel will show y... + Read more
    Categories: + Supported by: + +
    +
    • + +
  • + Explain console errors by using artificial intelligence + Edge with DevTools opened, an error was clicked, and Copilot is in the Edge sidebar, showing the error message and the explanation +
    + Edge DevTools lets use the Microsoft Copilot AI assistant to explain errors and warnings in the Console tool. +Console errors can sometimes be hard to understand and fix. The large language models that... + Read more +
    +
    + Categories: + Supported by: +
    +
    • + +
  • + Install or create extensions to customize DevTools + Microsoft Edge, with DevTools opened, showing a custom panel. +
    + There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may need very specific tools that aren't available by default. +Thankfully, DevTools can be extended with... + Read more +
    +
    + Categories: + + Supported by: +
    • @@ -3551,80 +3578,31 @@

    171 Alltips tips

    -
  • - Explain console errors by using artificial intelligence - Edge with DevTools opened, an error was clicked, and Copilot is in the Edge sidebar, showing the error message and the explanation +
  • + Expand DOM nodes recursively + Animation showing right-clicking on a node in Chrome's Elements panel and choosing "expand recursively".
    - Edge DevTools lets use the Microsoft Copilot AI assistant to explain errors and warnings in the Console tool. -Console errors can sometimes be hard to understand and fix. The large language models that... - Read more + You can expand all descendants under a given DOM node in one go, to avoid having to expand each node one by one, which may take a while. +In Chrome and Edge +Right-click on the node you want to expand... + Read more
    Categories: - Supported by: - -
    -
    • - -
  • - Use commands to do things faster - Edge's command menu. -
    - There is a command menu in Edge and Chrome that allows you to quickly access many different features of DevTools without having to navigate the UI. -Press Ctrl+Shift+P on Windows or Linux (or Cmd+Shift... - Read more -
    -
    - Categories: - Supported by: -
    -
    • - -
  • - Install or create extensions to customize DevTools - Microsoft Edge, with DevTools opened, showing a custom panel. -
    - There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may need very specific tools that aren't available by default. -Thankfully, DevTools can be extended with... - Read more -
    -
    - Categories: - - Supported by: -
    • -
  • - Enable DevTools in Safari - Safari's Preferences, the Advanced tab shows the Show Developer menu in menu bar option +
  • + Use commands to do things faster + Edge's command menu.
    - Unlike other browsers, Safari hides its DevTools (and other developer-related features) by default. That's actually good because 99% of the people using the browser are probably not web developers. -If... - Read more + There is a command menu in Edge and Chrome that allows you to quickly access many different features of DevTools without having to navigate the UI. +Press Ctrl+Shift+P on Windows or Linux (or Cmd+Shift... + Read more
    Categories: Supported by:
    @@ -3693,6 +3671,28 @@

    171 Alltips tips

    • +
  • + Enable DevTools in Safari + Safari's Preferences, the Advanced tab shows the Show Developer menu in menu bar option +
    + Unlike other browsers, Safari hides its DevTools (and other developer-related features) by default. That's actually good because 99% of the people using the browser are probably not web developers. +If... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Emulate forced-color mode Edge showing a webpage in forced-colors mode, with the Rendering panel next to it in DevTools. @@ -3847,6 +3847,29 @@

    171 Alltips tips

    • +
  • + Edit CSS absolute and relative positions by dragging points in the page + Animation of the geometry editor in Firefox, toggling it from the Layout panel, and then dragging top and left points to move the element in the page. +
    + Firefox features a position editor that lets you move elements in the page by drag and drop. This works with elements that are positioned in CSS with position:relative or position:absolute and that ha... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Edit JavaScript functions while debugging to test a quick fix Animation showing that it is possible to write code in the Sources panel, while debugging, to test fixes. @@ -3874,6 +3897,28 @@

    171 Alltips tips

    • +
  • + Edit CSS filters + The filter editing UI in Firefox. +
    + The filter property in CSS lets you change the way a particular element gets rendered. +Firefox provides a visual editor to play with CSS filters. You can add or remove filter functions from the list,... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Edit an element's attributes and tag name with the keyboard Animation of a part of the Inspector panel in Firefox, showing how pressing Enter on a focused element goes into edit mode and how Tab allows to navigate from field to field. @@ -3910,29 +3955,6 @@

    171 Alltips tips

    • -
  • - Edit CSS absolute and relative positions by dragging points in the page - Animation of the geometry editor in Firefox, toggling it from the Layout panel, and then dragging top and left points to move the element in the page. -
    - Firefox features a position editor that lets you move elements in the page by drag and drop. This works with elements that are positioned in CSS with position:relative or position:absolute and that ha... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Edit CSS angles Animation of the angle editor in Chrome, where a click is made on the angle swatch, and then the mouse is used to change the angle. @@ -3983,28 +4005,6 @@

    171 Alltips tips

    • -
  • - Edit CSS filters - The filter editing UI in Firefox. -
    - The filter property in CSS lets you change the way a particular element gets rendered. -Firefox provides a visual editor to play with CSS filters. You can add or remove filter functions from the list,... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Edit and resend faulty network requests to debug them Chrome DevTools' Copy as cURL feature and the corresponding command in the terminal @@ -4034,17 +4034,18 @@

    171 Alltips tips

    • -
  • - Drag and drop nodes in the DOM tree - Animation showing a node being dragged by the mouse in the DOM tree view of the Elements panel in Edge. +
  • + Download all images from the page + The Snippets panel in Edge, with the JS code from above, and the download panel open showing all images have been downloaded
    - If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you can do it by drag and dropping nodes around in the Elements (or Inspector) panel.... - Read more + If you want to download all of the images on a webpage in one go, you can use the following few lines of JavaScript code to do it: +$$('img').forEach(async (img) => { try { const src = img.src;... + Read more
    Categories: Supported by:
    • -
  • - Display the current framerate of your webpage - Chrome, with the FPS meter in the webpage, and DevTools opened to the side, showing the FPS command in the Command Menu -
    - For a super smooth user experience on your website or app, it's better if the browser manages to render your page at a high framerate. Ideally, this rate should be 60 frames per second (FPS). This giv... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • - -
  • - Download all images from the page - The Snippets panel in Edge, with the JS code from above, and the download panel open showing all images have been downloaded +
  • + Drag and drop nodes in the DOM tree + Animation showing a node being dragged by the mouse in the DOM tree view of the Elements panel in Edge.
    - If you want to download all of the images on a webpage in one go, you can use the following few lines of JavaScript code to do it: -$$('img').forEach(async (img) => { try { const src = img.src;... - Read more + If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you can do it by drag and dropping nodes around in the Elements (or Inspector) panel.... + Read more
    Categories: Supported by:
    • +
  • + Display the current framerate of your webpage + Chrome, with the FPS meter in the webpage, and DevTools opened to the side, showing the FPS command in the Command Menu +
    + For a super smooth user experience on your website or app, it's better if the browser manages to render your page at a high framerate. Ideally, this rate should be 60 frames per second (FPS). This giv... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Remove or disable event listeners The Firefox event popup in the Inspector panel, showing the checkbox to toggle events. @@ -4265,18 +4265,21 @@

    171 Alltips tips

    • -
  • - Detect low color contrast issues - The CSS Overview panel in Chrome, showing the color contrast issues section. +
  • + Detect unused CSS and JavaScript code + Edge DevTools, with the Coverage tool in the drawer, showing a list of files, and the Sources tool in the main panel, showing one of the files with red and blue bars in the gutter, which indicates which lines are unused vs. used
    - Low color vision is very common, and your choice of text and background colors can negatively impact people's experience of your website. What seems legible to you might not be for everyone. -DevTools... - Read more + To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly. If some of your CSS or JS code is only needed later, when th... + Read more
    Categories: Supported by:
    • -
  • - Check if a website uses third-party cookies - Chrome DevTools' Application tool, showing the cookies section containing a bunch of third-party websites +
  • + Detect low color contrast issues + The CSS Overview panel in Chrome, showing the color contrast issues section.
    - Cookies are small files that websites save on your computer when you visit them. Websites often use cookies to remember things about your last visit. For example, a weather website can use cookies to... - Read more + Low color vision is very common, and your choice of text and background colors can negatively impact people's experience of your website. What seems legible to you might not be for everyone. +DevTools... + Read more
    Categories: Supported by:
    • -
  • - Detect unused CSS and JavaScript code - Edge DevTools, with the Coverage tool in the drawer, showing a list of files, and the Sources tool in the main panel, showing one of the files with red and blue bars in the gutter, which indicates which lines are unused vs. used +
  • + Check if a website uses third-party cookies + Chrome DevTools' Application tool, showing the cookies section containing a bunch of third-party websites
    - To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly. If some of your CSS or JS code is only needed later, when th... - Read more + Cookies are small files that websites save on your computer when you visit them. Websites often use cookies to remember things about your last visit. For example, a weather website can use cookies to... + Read more
    Categories: Supported by:
    • -
  • - Debug unwanted scrollbars - Firefox DevTools, with the Inspector panel showing the Scroll badge on an element. +
  • + Debug your Safari Web Apps on macOS + The Develop menu in the Safari menu bar, showing different devices and debugging targets
    - Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it's not always very straightforward to fix the problem. Which container is responsible for the scroll... - Read more + Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a Web App on macOS. Once installed, the Web App shows up like any other app on macOS, in all of the s... + Read more
    Categories: Supported by:
    • -
  • - Debug popups that appear on hover - The Rendering tool in DevTools, showing the Emulate a focused page option +
  • + Debug unwanted scrollbars + Firefox DevTools, with the Inspector panel showing the Scroll badge on an element.
    - As described in Debug popups that appear on hover using JS and in Debug popups that appear on hover using the debugger statement, there are ways to debug popups that appear on hover using JavaScript.... - Read more + Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it's not always very straightforward to fix the problem. Which container is responsible for the scroll... + Read more
    Categories: Supported by:
    • -
  • - Debug your Safari Web Apps on macOS - The Develop menu in the Safari menu bar, showing different devices and debugging targets -
    - Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a Web App on macOS. Once installed, the Web App shows up like any other app on macOS, in all of the s... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Debug your print CSS styles by simulating print media Firefox, with DevTools open, showing the Inspector tool, with the print media button @@ -4517,13 +4488,12 @@

    171 Alltips tips

    • -
  • - Debug popups that appear on hover using the debugger statement - +
  • + Debug popups that appear on hover + The Rendering tool in DevTools, showing the Emulate a focused page option
    - In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popups that appear on hover and disappear as soon as the cursor moves away. -Here's another way to do thi... - Read more + As described in Debug popups that appear on hover using JS and in Debug popups that appear on hover using the debugger statement, there are ways to debug popups that appear on hover using JavaScript.... + Read more
    Categories: @@ -4540,12 +4510,8 @@

    171 Alltips tips

    chrome
  • - - safari - -
  • - - firefox + + polypane
    • @@ -4613,17 +4579,18 @@

    171 Alltips tips

    -
  • - Customize keyboard shortcuts - The Settings panel in Microsoft Edge, showing the keyboard shortcut customization screen. +
  • + Debug popups that appear on hover using the debugger statement +
    - DevTools comes with tons of keyboard shortcuts. Some are well known (like F12 to open DevTools), but there are many others which you might not be familiar with, and which could make your life easier.... - Read more + In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popups that appear on hover and disappear as soon as the cursor moves away. +Here's another way to do thi... + Read more
    Categories: Supported by: -
    -
    • - -
  • - Customize the way objects look in DevTools - Example of how a ColorCombo object looks in the Console tool of Chrome DevTools -
    - Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various parts of the Sources (or Debugger) tool when you debug JavaScript code. -DevTools is the one that decid... - Read more -
    -
    - Categories: - - Supported by: -
    • @@ -4707,6 +4650,31 @@

    171 Alltips tips

    +
  • + Customize keyboard shortcuts + The Settings panel in Microsoft Edge, showing the keyboard shortcut customization screen. +
    + DevTools comes with tons of keyboard shortcuts. Some are well known (like F12 to open DevTools), but there are many others which you might not be familiar with, and which could make your life easier.... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Customize the columns shown in console.table Example of a console.table output in Chrome DevTools showing a lot of columns, making it hard to read each column header @@ -4770,23 +4738,30 @@

    171 Alltips tips

    • -
  • - Create your own DevTools theme - Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded +
  • + Customize the way objects look in DevTools + Example of how a ColorCombo object looks in the Console tool of Chrome DevTools
    - You can change the color theme of DevTools to match your preference (see Change the color theme of DevTools to learn more), but you can also create your own theme from scratch by creating a browser ex... - Read more + Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various parts of the Sources (or Debugger) tool when you debug JavaScript code. +DevTools is the one that decid... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Create your own DevTools theme + Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded +
    + You can change the color theme of DevTools to match your preference (see Change the color theme of DevTools to learn more), but you can also create your own theme from scratch by creating a browser ex... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • + +
  • + Copy an element's XPath expression + The Elements panel in Edge showing the copy xpath option in the contextual menu. +
    + You can easily copy an element's XPath expression from DevTools. This is useful if you need this expression for an automated test for example. +Go to the Elements (or Inspector) panel +Use the context-... + Read more +
    +
    + Categories: + + Supported by: +
    • -
  • - Convert images to data-urls - The Network tool in Edge, an image is selected, the Preview tab is open, and the right-click menu shows the copy image as data URI item -
    - A data URL is a URL that starts with the prefix data: instead of http: or https:. This data prefix (or scheme) allows you to embed the actual content of the resource in the URL itself, rather than lin... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Copy an elements styles The Edge DevTools Elements panel, showing the context menu on an element and the Copy styles menu item. The screenshot also shows what the result of copying styles is: a flat list of CSS properties and values. @@ -4922,19 +4930,17 @@

    171 Alltips tips

    • -
  • - Copy an element's XPath expression - The Elements panel in Edge showing the copy xpath option in the contextual menu. +
  • + Copy an element's JavaScript path + The Elements tool in Edge showing the context menu on an element, with the Copy JS path option.
    - You can easily copy an element's XPath expression from DevTools. This is useful if you need this expression for an automated test for example. -Go to the Elements (or Inspector) panel -Use the context-... - Read more + JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy with document.getElementById() or similar. Other times however, a more complicated CSS selector needs... + Read more
    Categories: @@ -4947,14 +4953,6 @@

    171 Alltips tips

    chrome -
  • - - firefox - -
  • - - safari -
    • @@ -4992,46 +4990,17 @@

    171 Alltips tips

    -
  • - Copy an element's JavaScript path - The Elements tool in Edge showing the context menu on an element, with the Copy JS path option. -
    - JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy with document.getElementById() or similar. Other times however, a more complicated CSS selector needs... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • - -
  • - Convert color formats - Animation of the rules panel in Firefox, showing the color conversion. +
  • + Convert images to data-urls + The Network tool in Edge, an image is selected, the Preview tab is open, and the right-click menu shows the copy image as data URI item
    - Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexadecimal, and others. -In DevTools, you can easily convert from one format to the next. -Find an eleme... - Read more + A data URL is a URL that starts with the prefix data: instead of http: or https:. This data prefix (or scheme) allows you to embed the actual content of the resource in the URL itself, rather than lin... + Read more
    Categories: Supported by:
    • -
  • - Speed up or slow down a video - Screenshot of the Console tool showing the playbackRate property +
  • + Convert color formats + Animation of the rules panel in Firefox, showing the color conversion.
    - You can speed up or slow down a video on a website by using the playbackRate property of the video element. -This can be very useful for when the website makes it tricky to do this in the UI! -Open Dev... - Read more + Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexadecimal, and others. +In DevTools, you can easily convert from one format to the next. +Find an eleme... + Read more
    Categories: Supported by:
    • @@ -5183,54 +5142,54 @@

    171 Alltips tips

    -
  • - Access results from recent Console evaluations - The Console in Firefox DevTools showing how using $_ refers to the previous Console result +
  • + Change the color theme of DevTools + the settings panel in Edge showing the Theme drop-down.
    - Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(attr => {return {name: attr.name, value: attr.value}})) which extracts the attributes from all of t... - Read more + Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two themes, Edge also has about 10 VS Code themes such as Monokai and Solarized Dark. +To change the theme... + Read more
    Categories: Supported by:
    • -
  • - Change the color theme of DevTools - the settings panel in Edge showing the Theme drop-down. +
  • + Speed up or slow down a video + Screenshot of the Console tool showing the playbackRate property
    - Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two themes, Edge also has about 10 VS Code themes such as Monokai and Solarized Dark. -To change the theme... - Read more + You can speed up or slow down a video on a website by using the playbackRate property of the video element. +This can be very useful for when the website makes it tricky to do this in the UI! +Open Dev... + Read more
    Categories: Supported by: @@ -5250,6 +5209,10 @@

    171 Alltips tips

    safari +
  • + + polypane +
    • @@ -5316,65 +5279,65 @@

    171 Alltips tips

    -
  • - Block resources to test your site without CSS or JavaScript - The Network panel in Edge showing the contextual menu with the "block request url" item. +
  • + Create your own simulated devices + Animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices.
    - The various resources loaded by your site aren't always guaranteed to reach your users when they visit your site. Network problems can occur, JavaScript may be disabled, a CDN may be down, or the brow... - Read more + You can simulate various different devices from DevTools, to get an idea of how your webpage might render on those devices (note that this is only a simulation, the tool only changes the screen dimens... + Read more
    Categories: Supported by:
    • -
  • - Create your own simulated devices - Animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices. +
  • + Block resources to test your site without CSS or JavaScript + The Network panel in Edge showing the contextual menu with the "block request url" item.
    - You can simulate various different devices from DevTools, to get an idea of how your webpage might render on those devices (note that this is only a simulation, the tool only changes the screen dimens... - Read more + The various resources loaded by your site aren't always guaranteed to reach your users when they visit your site. Network problems can occur, JavaScript may be disabled, a CDN may be down, or the brow... + Read more
    Categories: Supported by:
    @@ -5453,6 +5416,43 @@

    171 Alltips tips

    • + +
  • + Access results from recent Console evaluations + The Console in Firefox DevTools showing how using $_ refers to the previous Console result +
    + Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(attr => {return {name: attr.name, value: attr.value}})) which extracts the attributes from all of t... + Read more +
    +
    + Categories: + + Supported by: + +
    +