diff --git a/tag/alltips/index.html b/tag/alltips/index.html index 8ec6b378..5408b90c 100644 --- a/tag/alltips/index.html +++ b/tag/alltips/index.html @@ -102,12 +102,15 @@

176 Alltips tips

+
+ + +
  • + Zoom the DevTools UI to your liking + Animation showing the UI of Chrome DevTools being zoomed in and out. +
    + Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML and CSS, just like any other web pages, it can be zoomed in (or out) by the browser just like you can... + Read more +
    +
    + Categories: + + Supported by: +
    • @@ -166,53 +200,47 @@

    176 Alltips tips

    -
  • - Visualize the screen reader order for elements within the page - The source order viewer in Microsoft Edge, showing numbered boxes around elements. +
  • + Visualize the effect of CSS transforms + Animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel.
    - 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 + CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple transformations. +Firefox helps with a cool visualization tool that allows you to see how and where the... + Read more
    Categories: Supported by:
    • -
  • - Zoom the DevTools UI to your liking - Animation showing the UI of Chrome DevTools being zoomed in and out. +
  • + View console logs from non-Safari browsers on an iPhone + Edge on iOS, showing the about:inspect page, filled with logs
    - Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML and CSS, just like any other web pages, it can be zoomed in (or out) by the browser just like you can... - Read more + Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iPhone! +This is important because debugging a webpage that's running in Safari on an iPhone isn't hard... + Read more
    Categories: Supported by:
    • -
  • - Visualize the effect of CSS transforms - Animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel. +
  • + Visualize the screen reader order for elements within the page + The source order viewer in Microsoft Edge, showing numbered boxes around elements.
    - CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple transformations. -Firefox helps with a cool visualization tool that allows you to see how and where the... - 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:
    @@ -316,34 +343,6 @@

    176 Alltips tips

    • -
  • - View console logs from non-Safari browsers on an iPhone - Edge on iOS, showing the about:inspect page, filled with logs -
    - Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iPhone! -This is important because debugging a webpage that's running in Safari on an iPhone isn't hard... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Use full browser window for device emulation Animation showing device emulation and how to undock the Developer Tools into an own window. @@ -416,6 +415,28 @@

    176 Alltips tips

    • +
  • + 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: + +
    +
    • +
  • Use DevTools in another language The settings panel in Edge showing a checkbox to match DevTools with the browser language. @@ -494,6 +515,42 @@

    176 Alltips tips

    • +
  • + Unminify JavaScript code to easily read and debug it + The Sources panel in Chrome, showing the pretty-print button. +
    + Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is common in production. +You can unminify code in DevTools to read it more easily, and also set breakpoi... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Understand when the Console opens in the main panel and in the drawer DevTools, with just one tool displayed, the Elements tool @@ -532,13 +589,15 @@

    176 Alltips tips

    • -
  • - Understand flexbox item sizing - Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram. +
  • + Tweak css grid and flexbox alignment properties + The grid editor in the Styles pane of Microsoft Edge.
    - 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 + 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: @@ -547,44 +606,38 @@

    176 Alltips tips

    • Supported by: -
  • - Unminify JavaScript code to easily read and debug it - The Sources panel in Chrome, showing the pretty-print button. +
  • + Throttle your CPU + The Performance tool in Chrome showing the CPU throttling drop-down.
    - Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is common in production. -You can unminify code in DevTools to read it more easily, and also set breakpoi... - Read more + Your development machine is very likely much more powerful than the devices your users have (which are probably low-end mobile devices). +Before you ship your new app or site, thinking that it will run... + Read more
    Categories: Supported by:
    @@ -654,60 +707,6 @@

    176 Alltips tips

    • -
  • - Tweak css grid and flexbox alignment properties - The grid editor in the Styles pane of Microsoft Edge. -
    - 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: - -
    -
    • - -
  • - Throttle your CPU - The Performance tool in Chrome showing the CPU throttling drop-down. -
    - Your development machine is very likely much more powerful than the devices your users have (which are probably low-end mobile devices). -Before you ship your new app or site, thinking that it will run... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Test your PWA protocol handlers Microsoft Edge, with the Application tool opened on the side, showing the Protocol Handlers section. @@ -824,6 +823,42 @@

    176 Alltips tips

    • +
  • + Apply CSS styles to console messages + A styled console message in Edge. +
    + The console.log output can be styled in DevTools using CSS. +console.log('%c Hello World', 'color: orange; font-size: 2em;');... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Store a node as a variable to use it in the console Firefox's "use in console" context menu option in the Inspector, and also showing the Console with a couple of tempN variables. @@ -862,20 +897,19 @@

    176 Alltips tips

    • -
  • - Apply CSS styles to console messages - A styled console message in Edge. +
  • + 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
    - The console.log output can be styled in DevTools using CSS. -console.log('%c Hello World', 'color: orange; font-size: 2em;');... - 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:
    • @@ -921,33 +947,6 @@

    176 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 -
    - 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: - -
    -
    • -
  • Simulate pseudo CSS classes The :hov button and the pseudo-class panel in Chrome DevTools @@ -1013,13 +1012,13 @@

    176 Alltips tips

    • -
  • - Simulate different devices and screen sizes - Chrome, with DevTools on the side, and the rendered webpage wrapped in the device simulation mode +
  • + Simulate a different latitude/longitude geolocation + Chrome, showing Google in Portuguese, with DevTools opened to the side and the Sensors tool showing that the geolocation was set to São Paulo.
    - All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities. -As a web developer, it is very important to realize that your website... - Read more + If your website has features that depend on the geographic location of your users, you can test these features by simulating different geolocations right from DevTools! +Chrome and Edge DevTools have a... + Read more
    Categories: @@ -1031,33 +1030,21 @@

    176 Alltips tips

    edge -
  • - - firefox -
  • chrome -
  • - - safari - -
  • - - polypane -
    • -
  • - Simulate a different latitude/longitude geolocation - Chrome, showing Google in Portuguese, with DevTools opened to the side and the Sensors tool showing that the geolocation was set to São Paulo. +
  • + Simulate different devices and screen sizes + Chrome, with DevTools on the side, and the rendered webpage wrapped in the device simulation mode
    - If your website has features that depend on the geographic location of your users, you can test these features by simulating different geolocations right from DevTools! -Chrome and Edge DevTools have a... - Read more + All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities. +As a web developer, it is very important to realize that your website... + Read more
    Categories: @@ -1069,10 +1056,22 @@

    176 Alltips tips

    edge +
  • + + firefox +
  • chrome +
  • + + safari + +
  • + + polypane +
    • @@ -1134,42 +1133,6 @@

    176 Alltips tips

    -
  • - 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. -
    - When selecting elements from the page they normally get highlighted on hover and selected on click. However certain elements can't be selected. -Indeed, if an element does not react to pointer events b... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Send feedback, ask for features and report bugs A feedback illustration showing a stick figure with a speech bubble @@ -1207,14 +1170,13 @@

    176 Alltips tips

    • -
  • - See the page in 3D - The 3D view tool showing a page's z-index stacking tree as a 3d scene. +
  • + 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.
    - See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issues, and performance issues. -In Edge # -Open the Command Menu by pressing ctrl+shift+P (or cmd+shift+... - Read more + When selecting elements from the page they normally get highlighted on hover and selected on click. However certain elements can't be selected. +Indeed, if an element does not react to pointer events b... + Read more
    Categories: @@ -1225,29 +1187,54 @@

    176 Alltips tips

    • Supported by: -
  • - See the viewport size - Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage +
  • + 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 size of the viewport that's used to render a webpage in a browser can be very important at times, such as when creating or debugging media queries. -You can easily know what the current size of the... - Read more -
    + 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 +
    + The size of the viewport that's used to render a webpage in a browser can be very important at times, such as when creating or debugging media queries. +You can easily know what the current size of the... + Read more +
    Categories:
    • -
  • - 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 network request paths instead of names in the Network tool The Network tool in Edge, showing the contextual menu that's used to customize the network list columns @@ -1361,31 +1327,34 @@

    176 Alltips tips

    • -
  • - See formatted JSON responses - The JSON viewer in Microsoft Edge. +
  • + See the page in 3D + The 3D view tool showing a page's z-index stacking tree as a 3d scene.
    - Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it easy to view JSON responses from your server directly in the browser window. -You don't even need to o... - Read more + See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issues, and performance issues. +In Edge # +Open the Command Menu by pressing ctrl+shift+P (or cmd+shift+... + Read more
    Categories: Supported by:
    @@ -1420,31 +1389,31 @@

    176 Alltips tips

    • -
  • - Scroll an element into view - Animation showing how the page is scrolled to reveal the selected element. +
  • + See formatted JSON responses + The JSON viewer in Microsoft Edge.
    - 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 + Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it easy to view JSON responses from your server directly in the browser window. +You don't even need to o... + Read more
    Categories: Supported by:
    @@ -1476,79 +1445,73 @@

    176 Alltips tips

    • -
  • - Sample colors from the page - Animation of the eyedropper tool being started from the Firefox main menu. +
  • + Replay a XHR request + Chrome's Network tool, with the Replay XHR contextual menu item
    - Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to do this in 2 different ways: -In Firefox it's really simple and doesn't even require opening DevToo... - Read more + When you're debugging an XHR request to a backend service that doesn't respond with the right things it can be useful to send the request over and over again. Reloading the entire page to do so is ted... + Read more
    Categories: Supported by:
    • -
  • - Replay a XHR request - Chrome's Network tool, with the Replay XHR contextual menu item +
  • + Scroll an element into view + Animation showing how the page is scrolled to reveal the selected element.
    - When you're debugging an XHR request to a backend service that doesn't respond with the right things it can be useful to send the request over and over again. Reloading the entire page to do so is ted... - 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:
    • -
  • - Remove annoying page overlays and other elements - Animation showing the whole flow from selecting the element with the inspect tool and pressing delete, resulting in the element disappearing from the page. +
  • + Sample colors from the page + Animation of the eyedropper tool being started from the Firefox main menu.
    - 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 + Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to do this in 2 different ways: +In Firefox it's really simple and doesn't even require opening DevToo... + Read more
    Categories: Supported by:
    @@ -1592,68 +1555,64 @@

    176 Alltips tips

    • -
  • - Record and replay user flows - Animation of the Recorder panel automatically replaying a set of recorded steps. +
  • + Remove annoying page overlays and other elements + Animation showing the whole flow from selecting the element with the inspect tool and pressing delete, resulting in the element disappearing from the page.
    - Sometimes, you need to repeatedly test the same user scenario on a website. This can happen when working on a fix or a performance improvement. Testing the same user scenario over and over again requi... - Read more + 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
    Categories: Supported by:
    • -
  • - Find DOM elements from the console - Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions. +
  • + Record and replay user flows + Animation of the Recorder panel automatically replaying a set of recorded steps.
    - $ and $$ are 2 functions you can use in the console to find elements in the page. -They are essentially shortcuts to the longer document.querySelector() and document.querySelectorAll() functions, but $... - Read more + Sometimes, you need to repeatedly test the same user scenario on a website. This can happen when working on a fix or a performance improvement. Testing the same user scenario over and over again requi... + Read more
    Categories: Supported by:
    @@ -1756,13 +1715,13 @@

    176 Alltips tips

    • -
  • - Prototype content changes with designMode - Animation of editable web page with designMode on. +
  • + Find DOM elements from the console + Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions.
    - 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 + $ and $$ are 2 functions you can use in the console to find elements in the page. +They are essentially shortcuts to the longer document.querySelector() and document.querySelectorAll() functions, but $... + Read more
    Categories: @@ -1770,11 +1729,13 @@

    176 Alltips tips

    console
  • html -
  • - productivity
    • Supported by: + + + +
  • + 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 +
    + 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: +
    • @@ -2255,19 +2313,19 @@

    176 Alltips tips

    -
  • - Cut down on console noise using live expressions - The eye button in DevTools +
  • + Inspect the user-agent DOM + The Elements tool in Chrome, an input type=range is expanded, showing it's internal user-agent shadow dom
    - 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 + Browsers often add elements to the DOM of your web pages on top of the ones you, yourself, defined. For example, when you create a <video> element, the browser creates a bunch of nested DOM node... + Read more
    Categories: Supported by:
    • @@ -2316,57 +2382,25 @@

    176 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: -
    -
    • - -
  • - 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. -
    - 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: -
    @@ -2432,19 +2466,17 @@

    176 Alltips tips

    • -
  • - Inspect the user-agent DOM - The Elements tool in Chrome, an input type=range is expanded, showing it's internal user-agent shadow dom +
  • + Inspect and debug iframes + Firefox, with DevTools opened on the side, showing the iframe selector button in the toolbar
    - Browsers often add elements to the DOM of your web pages on top of the ones you, yourself, defined. For example, when you create a <video> element, the browser creates a bunch of nested DOM node... - Read more + If the page you are working on contains an iframe which you want to inspect and debug, you can actually use DevTools to do so. This can be very useful when working with coding playground sites like Co... + 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:
    • -
  • - Inspect and debug iframes - Firefox, with DevTools opened on the side, showing the iframe selector button in the toolbar +
  • + 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.
    - If the page you are working on contains an iframe which you want to inspect and debug, you can actually use DevTools to do so. This can be very useful when working with coding playground sites like Co... - 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: -
    -
    • - -
  • - Ignore JavaScript code to ease debugging - Firefox ignore line contextual menu option, displayed on a few lines of selected JavaScript code. -
    - 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: -
    @@ -2673,6 +2672,45 @@

    176 Alltips tips

    • +
  • + Highlight all elements on the page that match a given CSS selector + Firefox, with a webpage showing 3 highlighted elements, and the button enabled in the Styles pane +
    + When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules that apply to it. But, these rules can also apply to other elements in the page than the currently sel... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • 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. @@ -2701,40 +2739,27 @@

    176 Alltips tips

    • -
  • - Highlight all elements on the page that match a given CSS selector - Firefox, with a webpage showing 3 highlighted elements, and the button enabled in the Styles pane +
  • + 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 you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules that apply to it. But, these rules can also apply to other elements in the page than the currently sel... - 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:
    @@ -2794,32 +2819,6 @@

    176 Alltips tips

    • -
  • - 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: - -
    -
    • -
  • Hide elements from the page, without changing the layout Chrome with DevTools opened, showing how pressing H hides elements from the page @@ -2855,13 +2854,13 @@

    176 Alltips tips

    • -
  • - Get the selected element in the console - Safari's console showing how the $0 shortcut returns the selected element. +
  • + Get the recently selected DOM nodes in the console + Chrome DevTools, with the Elements and Console tools shown. 5 DOM nodes are selected, one after the other, and then the $0, $1, $2, $3, and $4 shortcuts are used in the Console, showing how they refer to the previously selected DOM nodes.
    - If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspector panel (in Firefox), you can refer to it in the console using $0. -This shortcut will return the D... - Read more + If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned. This is very handy. To learn more, check Get the selected element in the console. +On top of this, in Ed... + Read more
    Categories: @@ -2869,26 +2868,16 @@

    176 Alltips tips

    console
  • html -
  • - productivity
    • Supported by: + -
  • - Find all images without alternative text - The output of the console.table command from above shown in the Firefox DevTools console. +
  • + 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.
    - With HTML, you can add alternative text to images using the alt attribute. It can be used to add a text description to images, which is extremely useful for accessibility as some people may not be abl... - Read more + 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:
    • @@ -3545,67 +3467,75 @@

    176 Alltips tips

    -
  • - Filter requests in the Network panel by status code, mime type and more - The Network panel in Edge showing the filter input field. +
  • + Find all images without alternative text + The output of the console.table command from above shown in the Firefox DevTools console.
    - The Network panel lets you filter requests by status code, or mime type, and more. -Click in the filter input field in the toolbar. -Start typing status-code, you should see an autocomplete popup letti... - Read more + With HTML, you can add alternative text to images using the alt attribute. It can be used to add a text description to images, which is extremely useful for accessibility as some people may not be abl... + Read more
    Categories: Supported by:
    • -
  • - Find all elements with a specific style - The Firefox DevTools Console tool, with the code shown on the left, and the resulting nodes listed on the right +
  • + Install or create extensions to customize DevTools + Microsoft Edge, with DevTools opened, showing a custom panel.
    - Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe you want to find all of the elements that use CSS grid. How would you do that? -One way is to run a few... - Read more + 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:
    • -
  • - Install or create extensions to customize DevTools - Microsoft Edge, with DevTools opened, showing a custom panel. +
  • + Find all elements with a specific style + The Firefox DevTools Console tool, with the code shown on the left, and the resulting nodes listed on the right
    - 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 + Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe you want to find all of the elements that use CSS grid. How would you do that? +One way is to run a few... + 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 +
  • + Filter requests in the Network panel by status code, mime type and more + The Network panel in Edge showing the filter input field.
    - 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 + The Network panel lets you filter requests by status code, or mime type, and more. +Click in the filter input field in the toolbar. +Start typing status-code, you should see an autocomplete popup letti... + Read more
    Categories: Supported by:
    • @@ -3719,6 +3658,30 @@

    176 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 +
    + 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: + +
    +
    • +
  • Use commands to do things faster Edge's command menu. @@ -3745,6 +3708,28 @@

    176 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: + +
    +
    • +
  • Evaluate XPath to find elements in the page The Inspector panel in Firefox showing the search field with an XPath expression. @@ -3782,28 +3767,6 @@

    176 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: - -
    -
    • -
  • Use user gesture restricted APIs in the Console Safari WebInspector, showing the Console tool, and the user gesture checkbox @@ -3887,41 +3850,6 @@

    176 Alltips tips

    • -
  • - Empty the cache and hard refresh - The Microsoft Edge browser toolbar, showing the contextual menu of the refresh button, with the empty cache and hard refresh menu item. -
    - Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code changes: -In Chrome, or Edge, open DevTools (F12). This step is not needed for Polypane. -Right-click on t... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Emulate color schemes Firefox, with DevTools open, showing the Inspector tool, with the color scheme buttons @@ -3961,32 +3889,9 @@

    176 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 shadow visually - Animation showing the shadow editor in Edge's Styles pane. +
  • + Edit CSS shadow visually + Animation showing the shadow editor in Edge's Styles pane.
    If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Edge can help you with their visual shadow editor! Select an element that has some shadow applied. @@ -4011,50 +3916,36 @@

    176 Alltips tips

    • -
  • - Edit CSS filters - The filter editing UI in Firefox. +
  • + Empty the cache and hard refresh + The Microsoft Edge browser toolbar, showing the contextual menu of the refresh button, with the empty cache and hard refresh menu item.
    - 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 + Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code changes: +In Chrome, or Edge, open DevTools (F12). This step is not needed for Polypane. +Right-click on t... + 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. -
    - Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see whether that fixes the bug. -Usually, this involves the following steps: -Pause at a breakpoint, or an... - Read more -
    -
    - Categories: - - Supported by: -
    @@ -4096,13 +3987,12 @@

    176 Alltips tips

    • -
  • - Edit clip-path and shape-outside CSS properties by dragging points in the page - Animation of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page. +
  • + 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.
    - The clip-path property is a great way to change the final shape of an element and give it the shape that you want. -You can use this property to make an element be a circle, an ellipse, a polygon or an... - Read more + 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: @@ -4120,17 +4010,19 @@

    176 Alltips tips

    • -
  • - Edit and resend faulty network requests to debug them - Chrome DevTools' Copy as cURL feature and the corresponding command in the terminal +
  • + 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.
    - When you're investigating a bug where the backend you connect to doesn't respond with the right things it's useful to tweak the requests and try again quickly. You can do this by changing your fronten... - Read more + Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see whether that fixes the bug. +Usually, this involves the following steps: +Pause at a breakpoint, or an... + Read more
    Categories: Supported by: +
    +
    • + +
  • + 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: +
    • -
  • - 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. +
  • + Edit clip-path and shape-outside CSS properties by dragging points in the page + Animation of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page.
    - 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 + The clip-path property is a great way to change the final shape of an element and give it the shape that you want. +You can use this property to make an element be a circle, an ellipse, a polygon or an... + 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 +
    + 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 specificity of a CSS selector - Chrome DevTools showing the specificity of a CSS selector in a tooltip +
  • + Edit and resend faulty network requests to debug them + Chrome DevTools' Copy as cURL feature and the corresponding command in the terminal
    - The specificity of a CSS selector is a score that the browser computes based on the different parts of the selector. It is used to determine which CSS rule takes precedence when multiple rules from th... - Read more + When you're investigating a bug where the backend you connect to doesn't respond with the right things it's useful to tweak the requests and try again quickly. You can do this by changing your fronten... + 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:
    • -
  • - Discover all the tools - The list of most tools in Edge DevTools, just to illustrate how many there are +
  • + Remove or disable event listeners + The Firefox event popup in the Inspector panel, showing the checkbox to toggle events.
    - 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 + When you're trying to debug something and event listeners on the page keep interfering with what you're doing, it can be frustrating. +Imagine a mousemove event listener that changes some of the inform... + Read more
    Categories: Supported by: +
    +
    • + +
  • + Display the specificity of a CSS selector + Chrome DevTools showing the specificity of a CSS selector in a tooltip +
    + The specificity of a CSS selector is a score that the browser computes based on the different parts of the selector. It is used to determine which CSS rule takes precedence when multiple rules from th... + Read more +
    +
    + Categories: + + Supported by: +
    • -
  • - Remove or disable event listeners - The Firefox event popup in the Inspector panel, showing the checkbox to toggle events. +
  • + Discover all the tools + The list of most tools in Edge DevTools, just to illustrate how many there are
    - When you're trying to debug something and event listeners on the page keep interfering with what you're doing, it can be frustrating. -Imagine a mousemove event listener that changes some of the inform... - Read more + 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
    Categories: Supported by:
    • @@ -4411,31 +4374,33 @@

    176 Alltips tips

    -
  • - 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 +
  • + Use the debugger statement to pause script execution + The Sources panel in Edge, paused at a debugger statement.
    - 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 + If you prefer to use console.log() statements rather than the JavaScript debugger because you find it difficult to set breakpoints in DevTools (or you can't), then you can use the debugger statement i... + Read more
    Categories: Supported by:
    • +
  • + Disable abusive debugger statements that prevent inspecting websites + The Sources tool in Firefox, showing how to add a conditional breakpoint. +
    + Some websites make it impossible to use DevTools by adding debugger statements in their code. +The statements don't do anything for normal users, but as soon as DevTools is opened, the JavaScript execu... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Detect low color contrast issues The CSS Overview panel in Chrome, showing the color contrast issues section. @@ -4478,33 +4475,34 @@

    176 Alltips tips

    • -
  • - Disable abusive debugger statements that prevent inspecting websites - The Sources tool in Firefox, showing how to add a conditional breakpoint. +
  • + 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
    - Some websites make it impossible to use DevTools by adding debugger statements in their code. -The statements don't do anything for normal users, but as soon as DevTools is opened, the JavaScript execu... - 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:
    @@ -4545,41 +4543,6 @@

    176 Alltips tips

    • -
  • - Use the debugger statement to pause script execution - The Sources panel in Edge, paused at a debugger statement. -
    - If you prefer to use console.log() statements rather than the JavaScript debugger because you find it difficult to set breakpoints in DevTools (or you can't), then you can use the debugger statement i... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Debug unwanted scrollbars Firefox DevTools, with the Inspector panel showing the Scroll badge on an element. @@ -4699,6 +4662,35 @@

    176 Alltips tips

    • +
  • + Debug popups that appear on hover + The Rendering tool in DevTools, showing the Emulate a focused page option +
    + 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: + + Supported by: + +
    +
    • +
  • Debug popups that appear on hover using the debugger statement @@ -4733,17 +4725,17 @@

    176 Alltips tips

    • -
  • - Debug popups that appear on hover - The Rendering tool in DevTools, showing the Emulate a focused page option +
  • + Debug CSS grid areas + Firefox showing a highlighted grid in the page showing the area names, and DevTools below it with the "display area names" option checked.
    - 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 + A really useful way to position elements on a CSS grid is using the grid-template-areas property. With it, you can give names to various areas of your grid (potentially spanning multiple cells), and t... + Read more
    Categories: Supported by:
    @@ -4799,35 +4791,6 @@

    176 Alltips tips

    • -
  • - Debug CSS grid areas - Firefox showing a highlighted grid in the page showing the area names, and DevTools below it with the "display area names" option checked. -
    - A really useful way to position elements on a CSS grid is using the grid-template-areas property. With it, you can give names to various areas of your grid (potentially spanning multiple cells), and t... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Customize keyboard shortcuts The Settings panel in Microsoft Edge, showing the keyboard shortcut customization screen. @@ -4891,31 +4854,6 @@

    176 Alltips tips

    • -
  • - 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: - -
    -
    • -
  • Customize the way objects look in DevTools Example of how a ColorCombo object looks in the Console tool of Chrome DevTools @@ -5003,18 +4941,17 @@

    176 Alltips tips

    • -
  • - Copy an inline SVG image's source code - Copying the SVG source code in Edge DevTools +
  • + Create your own DevTools theme + Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded
    - To copy the SVG source code of an SVG image that's embedded directly in the HTML of a webpage, use the Elements tool in DevTools (Inspector in Firefox). -To open DevTools, right-click the SVG image i... - Read more + 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:
    • @@ -5089,9 +5014,80 @@

    176 Alltips tips

    Categories: + Supported by: + +
    + + +
  • + Copy an inline SVG image's source code + Copying the SVG source code in Edge DevTools +
    + To copy the SVG source code of an SVG image that's embedded directly in the HTML of a webpage, use the Elements tool in DevTools (Inspector in Firefox). +To open DevTools, right-click the SVG image i... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • + +
  • + Copy CSS selector of an element + Edge DevTools, showing how to access the Copy CSS selector option. +
    + Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be referenced in JavaScript and other places. All the major browsers have an option to build a unique CSS sel... + Read more +
    +
    + Categories: + Supported by:
    • -
  • - Convert font property units - The fonts panel in Firefox, showing the unit conversion drop-down. -
    - Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple different length units (like many other CSS properties). -Firefox, Chrome and Edge allow you to convert... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • - -
  • - Copy CSS selector of an element - Edge DevTools, showing how to access the Copy CSS selector option. +
  • + 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
    - Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be referenced in JavaScript and other places. All the major browsers have an option to build a unique CSS sel... - 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:
    • -
  • - 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 +
  • + Convert font property units + The fonts panel in Firefox, showing the unit conversion drop-down.
    - 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 + Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple different length units (like many other CSS properties). +Firefox, Chrome and Edge allow you to convert... + Read more
    Categories: Supported by:
    • @@ -5337,31 +5300,6 @@

    176 Alltips tips

    -
  • - Check if your site can be instantly reloaded from bfcache - Chrome DevTools with the Application tool, and the bfcache tab selected, showing a warning that the page can't be cached. -
    - Most browsers are now able to instantly go back to previously visited pages without having to wait for them to load. This ability is powered by the back/forward cache (or bfcache). Firefox, Safari, an... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Speed up or slow down a video Screenshot of the Console tool showing the playbackRate property @@ -5403,18 +5341,17 @@

    176 Alltips tips

    • -
  • - Change the color theme of DevTools - the settings panel in Edge showing the Theme drop-down. +
  • + Check if your site can be instantly reloaded from bfcache + Chrome DevTools with the Application tool, and the bfcache tab selected, showing a warning that the page can't be cached.
    - 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 + Most browsers are now able to instantly go back to previously visited pages without having to wait for them to load. This ability is powered by the back/forward cache (or bfcache). Firefox, Safari, an... + Read more
    Categories: Supported by:
    • @@ -5463,6 +5392,40 @@

    176 Alltips tips

    +
  • + Change the color theme of DevTools + the settings panel in Edge showing the Theme drop-down. +
    + 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: + +
    +
    • +
  • Pause script execution when the DOM changes The Elements panel in Edge showing the "Break on" contextual menu on the selected node. @@ -5530,58 +5493,51 @@

    176 Alltips tips

    • -
  • - Automatically logging name and value in console.log() - Animation showing the different ways the variables are logged with and without curly braces. +
  • + Block DevTools + Disabling F12 in Firefox's about:config page
    - Using the console of DevTools you can to log some information to debug your JavaScript. -The common way to do that is to add a console.log() statement where you want to learn the value of a certain var... - Read more + 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
    Categories: Supported by:
    • -
  • - Block DevTools - Disabling F12 in Firefox's about:config page +
  • + Create your own simulated devices + Animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices.
    - 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 + 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. +
  • + Automatically logging name and value in console.log() + Animation showing the different ways the variables are logged with and without curly braces.
    - 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 + Using the console of DevTools you can to log some information to debug your JavaScript. +The common way to do that is to add a console.log() statement where you want to learn the value of a certain var... + Read more
    Categories: Supported by: +
    +
    • + +
  • + 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: +