diff --git a/tag/alltips/index.html b/tag/alltips/index.html index aec38e35..6bfc11bf 100644 --- a/tag/alltips/index.html +++ b/tag/alltips/index.html @@ -103,23 +103,26 @@

171 Alltips tips

Supported by:
-
  • - Visualize the screen reader order for elements within the page - The source order viewer in Microsoft Edge, showing numbered boxes around elements. +
  • + View console logs from non-Safari browsers on an iPhone + Edge on iOS, showing the about:inspect page, filled with logs
    - 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 + 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:
    • -
  • - View performance markers in order - The console in Edge showing the PerformanceTiming object, with alphabetical properties, and then using console.table to sort properties. +
  • + Console.log() for the web with logpoints + Setting a logpoint in the sources tool.
    - When logging performance.timing events to the console, they appear in alphabetical order since they are properties of the PerformanceTiming object. -In order to view them in order, you can use console.... - 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: -
    -
    • - -
  • - 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: -
    @@ -427,25 +424,23 @@

    171 Alltips tips

    • -
  • - Use DevTools in another language - The settings panel in Edge showing a checkbox to match DevTools with the browser language. +
  • + Unminify JavaScript code to easily read and debug it + The Sources panel in Chrome, showing the pretty-print button.
    - 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 + 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:
    • -
  • - Console.log() for the web with logpoints - Setting a logpoint in the sources tool. +
  • + Use DevTools in another language + The settings panel in Edge showing a checkbox to match DevTools with the browser language.
    - 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 + 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:
    • -
  • - Unminify JavaScript code to easily read and debug it - The Sources panel in Chrome, showing the pretty-print button. +
  • + Understand flexbox item sizing + Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram.
    - 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 + 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:
    • @@ -572,23 +554,30 @@

    171 Alltips tips

    -
  • - Understand flexbox item sizing - Firefox, with the DevTools Inspector tool opened, showing the Layout sidebar that contains the flex item diagram. +
  • + Detect the element with focus at any time + Animation showing a web page with focus going through different element, and the Edge Console panel with the live expression showing a preview of the focused element.
    - 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 + If you want to know which element has the focus on the web page at any time, you can use a live expression in the Console tool. +Open the Console. +Click the Create live expression button (it looks lik... + Read more
    Categories: Supported by:
    @@ -622,21 +611,18 @@

    171 Alltips tips

    • -
  • - Detect the element with focus at any time - Animation showing a web page with focus going through different element, and the Edge Console panel with the live expression showing a preview of the focused element. -
    - If you want to know which element has the focus on the web page at any time, you can use a live expression in the Console tool. -Open the Console. -Click the Create live expression button (it looks lik... - Read more +
  • + 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:
    • -
  • - Throttle your CPU - The Performance tool in Chrome showing the CPU throttling drop-down. +
  • + Test your PWA protocol handlers + Microsoft Edge, with the Application tool opened on the side, showing the Protocol Handlers section.
    - 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 + 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:
    • -
  • - Test your PWA protocol handlers - Microsoft Edge, with the Application tool opened on the side, showing the Protocol Handlers section. +
  • + Event listeners are suppressed when paused + A page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page.
    - 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 + This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript. +If you use breakpoints in the Sources (or Debugger) tab in DevTools to debug JavaScript, you should... + Read more
    Categories: Supported by: -
    -
    • - -
  • - 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: -
    • -
  • - Event listeners are suppressed when paused - A page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page. +
  • + Apply CSS styles to console messages + A styled console message in Edge.
    - This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript. -If you use breakpoints in the Sources (or Debugger) tab in DevTools to debug JavaScript, you should... - Read more + 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:
    • -
  • - 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 @@ -993,18 +926,19 @@

    171 Alltips tips

    • -
  • - 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 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 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 + 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 color vision deficiencies - The color vision simulation drop-down in Firefox. -
    - People who visit your web pages may have different types of color vision deficiencies that, if you incorrectly use colors for meaning, may affect their experience. -Firefox, Chrome, Polypane and Edge m... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Simulate different devices and screen sizes Chrome, with DevTools on the side, and the rendered webpage wrapped in the device simulation mode @@ -1115,17 +1015,18 @@

    171 Alltips tips

    • -
  • - Send feedback, ask for features and report bugs - A feedback illustration showing a stick figure with a speech bubble +
  • + 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.
    - 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 + 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: Supported by:
    • -
  • - Show web vitals - The web vitals tooltip in Polypane showing a good CLS, LCP and FCP score and a FID score that needs improvement. +
  • + Simulate color vision deficiencies + The color vision simulation drop-down in Firefox.
    - 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 + People who visit your web pages may have different types of color vision deficiencies that, if you incorrectly use colors for meaning, may affect their experience. +Firefox, Chrome, Polypane and Edge m... + 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. +
  • + See the viewport size + Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage
    - 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 + 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: 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 +
  • + Access results from recent Console evaluations + The Console in Firefox DevTools showing how using $_ refers to the previous Console result
    - 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 + 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:
    • -
  • - 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: @@ -1250,37 +1171,59 @@

    171 Alltips tips

    • Supported by: -
  • - See the viewport size - Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage +
  • + Show web vitals + The web vitals tooltip in Polypane showing a good CLS, LCP and FCP score and a FID score that needs improvement.
    - 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 + 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: + +
    +
    • + +
  • + Send feedback, ask for features and report bugs + A feedback illustration showing a stick figure with a speech bubble +
    + 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:
    • -
  • - 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 +
  • + 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
    - By default, the Network tool displays the name of each requested resource. For example, if a webpage requests an image from https://mysite.com/assets/img/image.png then the tool only displays image.pn... - 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 page in 3D + The 3D view tool showing a page's z-index stacking tree as a 3d scene. +
    + 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:
    @@ -1365,18 +1333,17 @@

    171 Alltips tips

    • -
  • - Scroll an element into view - Animation showing how the page is scrolled to reveal the selected element. +
  • + 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
    - 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 + By default, the Network tool displays the name of each requested resource. For example, if a webpage requests an image from https://mysite.com/assets/img/image.png then the tool only displays image.pn... + Read more
    Categories: Supported by:
    • +
  • + See formatted JSON responses + The JSON viewer in Microsoft Edge. +
    + 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: + +
    +
    • +
  • See the accessibility tree The Accessibility tool in Firefox, showing the accessibility tree @@ -1424,28 +1421,32 @@

    171 Alltips tips

    • -
  • - See formatted JSON responses - The JSON viewer in Microsoft Edge. +
  • + Sample colors from the page + Animation of the eyedropper tool being started from the Firefox main menu.
    - 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 + 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:
    • -
  • - 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:
    • -
  • - Sample colors from the page - Animation of the eyedropper tool being started from the Firefox main menu. +
  • + 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
    - 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 + 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:
    • @@ -1596,20 +1593,74 @@

    171 Alltips tips

    -
  • - 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: + +
    +
    • + +
  • + 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: + +
    +
    • + +
  • + Quickly reference React components in the console + The React DevTools components panel in DevTools, and Console below it, showing the result of $r +
    + Zee shared a great tip on Twitter if you are working with React and have the React DevTools extension installed. +You can use $r in the Console tool to reference the currently selected element in the R... + Read more +
    +
    + Categories: + Supported by:
    • -
  • - Record and replay user flows - Animation of the Recorder panel automatically replaying a set of recorded steps. +
  • + 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.
    - 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 + 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:
    • -
  • - 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. +
  • + Find DOM elements from the console + Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions.
    - 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 + $ 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: Supported by:
    • @@ -1743,21 +1799,20 @@

    171 Alltips tips

    -
  • - Query object instances and holders from the console - The console in Safari, showing the result of queryInstances(app.TodoItem). +
  • + Play a sound when a line of JavaScript is executed + Animation showing how to add the audio breakpoint in Safari Web Inspector.
    - 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 + Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only want to know that the line was executed at all, not pause there. +To do this you can add console.log()... + Read more
    Categories: Supported by:
    • -
  • - Quickly reference React components in the console - The React DevTools components panel in DevTools, and Console below it, showing the result of $r -
    - Zee shared a great tip on Twitter if you are working with React and have the React DevTools extension installed. -You can use $r in the Console tool to reference the currently selected element in the R... - 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. @@ -1839,55 +1860,58 @@

    171 Alltips tips

    • -
  • - Play a sound when a line of JavaScript is executed - Animation showing how to add the audio breakpoint in Safari Web Inspector. +
  • + Take a screenshot of a single node + Animation showing taking a node screenshot in Firefox.
    - Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only want to know that the line was executed at all, not pause there. -To do this you can add console.log()... - Read more + In Firefox, Chrome, Polypane and Edge DevTools, you can screenshot a single node from the page. +Go to the Elements panel (or Inspector panel in Firefox). +Right-click on the node you want to screensho... + 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 +
  • + Paste multiple CSS declarations at once + Animation showing how pasting several declarations in a CSS rule in DevTools creates them all.
    - 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 + 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:
    • @@ -1940,55 +1972,20 @@

    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: - -
    -
    • - -
  • - Take a screenshot of a single node - Animation showing taking a node screenshot in Firefox. +
  • + 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
    - In Firefox, Chrome, Polypane and Edge DevTools, you can screenshot a single node from the page. -Go to the Elements panel (or Inspector panel in Firefox). -Right-click on the node you want to screensho... - 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: Supported by:
    @@ -2049,29 +2046,6 @@

    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 -
    - 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: - -
    -
    • -
  • Move panels to re-arrange them Animation in Edge DevTools showing the move to top/bottom menus. @@ -2136,70 +2110,62 @@

    171 Alltips tips

    • -
  • - 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 +
  • + 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
    - 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 + 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:
    • -
  • - Manipulate complex JSON files using DevTools - VSCode with some JSON data and DevTools next to it with the snippets panel containing JS code to manipulate the JSON. +
  • + 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
    - I often work with large amount of data that I need to go through and gather interesting information from. Sometimes this data is in JSON format. When that's the case, I like using DevTools to turn it... - 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:
    • -
  • - Cut down on console noise using live expressions - The eye button in DevTools +
  • + Manipulate complex JSON files using DevTools + VSCode with some JSON data and DevTools next to it with the snippets panel containing JS code to manipulate the JSON.
    - 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 + I often work with large amount of data that I need to go through and gather interesting information from. Sometimes this data is in JSON format. When that's the case, I like using DevTools to turn it... + Read more
    Categories: Supported by: @@ -2207,6 +2173,10 @@

    171 Alltips tips

    edge +
  • + + firefox +
  • chrome @@ -2249,36 +2219,29 @@

    171 Alltips tips

    • -
  • - 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. +
  • + Cut down on console noise using live expressions + The eye button in DevTools
    - 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 + 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:
    • @@ -2366,33 +2329,32 @@

    171 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 +
  • + 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.
    - 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 + 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:
    • -
  • - Inspect CSS animations - Animation of Chrome DevTools showing how to inspect and modify CSS animations using the Animation inspector. +
  • + Inspect the user-agent DOM + The Elements tool in Chrome, an input type=range is expanded, showing it's internal user-agent shadow dom
    - Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions, and Web animations. These tools not only help you debug animations, but also let you modify the vari... - 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:
    • @@ -2496,13 +2464,44 @@

    171 Alltips tips

    -
  • - 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 CSS animations + Animation of Chrome DevTools showing how to inspect and modify CSS animations using the Animation inspector. +
    + Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions, and Web animations. These tools not only help you debug animations, but also let you modify the vari... + Read more
    Categories: @@ -2515,6 +2514,33 @@

    171 Alltips tips

    edge
  • + + chrome + +
  • + + firefox + +
    • + + + +
  • + 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: +
    • -
  • - Ignore JavaScript code to ease debugging - Firefox ignore line contextual menu option, displayed on a few lines of selected JavaScript code. +
  • + 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.
    - 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 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:
    @@ -2609,26 +2645,23 @@

    171 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 +
  • + 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.
    - 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 + 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:
    • @@ -2677,27 +2702,24 @@

    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. +
  • + Automatically get issues your site has with performance, accessibility, security, compatibility, and others. + The issues panel in Edge, showing many different issues about the page.
    - 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 + Edge has a very useful Issues panel that can automatically list a lot of different issues with your site. It can detect common issues related to browser compatibility, accessibility, performance, secu... + Read more
    Categories: Supported by:
    • -
  • - Automatically get issues your site has with performance, accessibility, security, compatibility, and others. - The issues panel in Edge, showing many different issues about the page. +
  • + Get the selected element in the console + Safari's console showing how the $0 shortcut returns the selected element.
    - Edge has a very useful Issues panel that can automatically list a lot of different issues with your site. It can detect common issues related to browser compatibility, accessibility, performance, secu... - Read more + 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
    Categories: Supported by:
    • @@ -2847,6 +2886,42 @@

    171 Alltips tips

    +
  • + Format console messages + A formatted console message in Edge. +
    + You can use special formatters in the console.log function to format logs just the way you want. +Use %s to format a variable as a string. +Use %d to format a variable as an integer. +Use %f to format a... + Read more +
    +
    + Categories: + + Supported by: + +
    +
    • +
  • Get contextual DevTools help Animation of the DevTools tooltips in Edge. @@ -2870,41 +2945,22 @@

    171 Alltips tips

    • -
  • - Get the selected element in the console - Safari's console showing how the $0 shortcut returns the selected element. +
  • + 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.
    - 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 + 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:
    • -
  • - Format console messages - A formatted console message in Edge. +
  • + Force PWA periodic background syncs + The Application panel in Edge showing the periodic sync input and buttons.
    - You can use special formatters in the console.log function to format logs just the way you want. -Use %s to format a variable as a string. -Use %d to format a variable as an integer. -Use %f to format a... - Read more + 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:
    • @@ -2980,22 +3027,29 @@

    171 Alltips tips

    -
  • - 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. +
  • + Fix low color contrast issues + The chrome color picker, showing the contrast lines and new color suggestions
    - 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 + With DevTools you can detect low color contrast issues which is great. But Chrome DevTools, Edge DevTools, and Polypane, you can go one step further and fix these issues directly! +In Chrome and Edge #... + Read more
    Categories: Supported by:
    • -
  • - Fix low color contrast issues - The chrome color picker, showing the contrast lines and new color suggestions +
  • + Fix color contrast issues using the element tooltip + Animation of the Elements panel in Microsoft Edge. User clicks on color value, then activates the inspect tool, then hovers over an element on the page, then uses the arrow keys to change the color. We see the element tooltip showing the background and text colors as well as the resulting contrast.
    - With DevTools you can detect low color contrast issues which is great. But Chrome DevTools, Edge DevTools, and Polypane, you can go one step further and fix these issues directly! -In Chrome and Edge #... - Read more + There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice one to keep in mind. It's not straightforward to use and takes a few steps, but makes it very nice to... + Read more
    Categories: @@ -3025,10 +3078,6 @@

    171 Alltips tips

    chrome -
  • - - polypane -
    • @@ -3068,33 +3117,6 @@

    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: - -
    -
    • -
  • Find the offset parent of an element Polypane showing an inspected element with the Debug tab open. The Offset parent entry is highlighted. @@ -3117,31 +3139,6 @@

    171 Alltips tips

    • -
  • - Fix color contrast issues using the element tooltip - Animation of the Elements panel in Microsoft Edge. User clicks on color value, then activates the inspect tool, then hovers over an element on the page, then uses the arrow keys to change the color. We see the element tooltip showing the background and text colors as well as the resulting contrast. -
    - There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice one to keep in mind. It's not straightforward to use and takes a few steps, but makes it very nice to... - 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 @@ -3168,13 +3165,12 @@

    171 Alltips tips

    • -
  • - 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 the CSS rule that causes a specific style to apply + The Elements tool in Chrome, showing the Computed tab. The expander icon next to the CSS property has been clicked, revealing the stylesheet location where this style comes from
    - 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 + Here is the scenario: you know there's a specific style that applies to an HTML element in your web page, say some padding, but you can't seem to find where, in the CSS code, that style is coming from... + Read more
    Categories: @@ -3196,6 +3192,10 @@

    171 Alltips tips

    chrome +
  • + + safari +
    • @@ -3225,26 +3225,54 @@

    171 Alltips tips

    -
  • - Find the CSS rule that causes a specific style to apply - The Elements tool in Chrome, showing the Computed tab. The expander icon next to the CSS property has been clicked, revealing the stylesheet location where this style comes from +
  • + 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.
    - Here is the scenario: you know there's a specific style that applies to an HTML element in your web page, say some padding, but you can't seem to find where, in the CSS code, that style is coming from... - 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 the most expensive CSS selectors + The Performance tool in Chrome showing a recorded profile with a selected Recalculate Style block, and the Selector Stats table below it. +
    + When it comes to improving web rendering performance, we often spend time working on JavaScript code. But CSS has an important role to play too in how fast a web page renders. CSS selectors, in partic... + Read more
    Categories: Supported by:
    • @@ -3298,19 +3322,19 @@

    171 Alltips tips

    -
  • - Find the most expensive CSS selectors - The Performance tool in Chrome showing a recorded profile with a selected Recalculate Style block, and the Selector Stats table below it. +
  • + Find and export CSS changes + The Changes panel in Firefox showing a diff-like view of all the CSS changes.
    - When it comes to improving web rendering performance, we often spend time working on JavaScript code. But CSS has an important role to play too in how fast a web page renders. CSS selectors, in partic... - Read more + If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can... + Read more
    Categories: Supported by:
    • @@ -3389,41 +3421,6 @@

    171 Alltips tips

    -
  • - Find and export CSS changes - The Changes panel in Firefox showing a diff-like view of all the CSS changes. -
    - If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Find broken links Polypane, with the outline panel open. Two of the links show a 404 error code @@ -3446,19 +3443,22 @@

    171 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 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
    - 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 + 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:
    • -
  • - 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 +
  • + Filter requests in the Network panel by status code, mime type and more + The Network panel in Edge showing the filter input field.
    - 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 + 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:
    • @@ -3596,6 +3593,43 @@

    171 Alltips tips

    +
  • + Evaluate XPath to find elements in the page + The Inspector panel in Firefox showing the search field with an XPath expression. +
    + DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All browsers support those 2 ways: +From the Elements (or Inspector) panel: +Click anywhere in the panel... + 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 @@ -3668,21 +3702,18 @@

    171 Alltips tips

    • -
  • - Evaluate XPath to find elements in the page - The Inspector panel in Firefox showing the search field with an XPath expression. +
  • + Use user gesture restricted APIs in the Console + Safari WebInspector, showing the Console tool, and the user gesture checkbox
    - DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All browsers support those 2 ways: -From the Elements (or Inspector) panel: -Click anywhere in the panel... - Read more + Certain web APIs are user gesture restricted. This means that they can only be called as a result of a user action, such as in a click event handler. +For example, you can't simply put yout website in... + Read more
    Categories: Supported by:
    • -
  • - Emulate idle detection states - Chrome DevTools' Sensors panel, showing a drop-down list with the different states that can be emulated. +
  • + Emulate color schemes + Firefox, with DevTools open, showing the Inspector tool, with the color scheme buttons
    - The Idle Detection API is useful for web developers to detect when the user isn't interacting with their device. This can be useful for chat applications, for example, to mark the user as away. -Note:... - Read more + In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers using a light or a dark theme in their operating system. This is useful to style your website in a way t... + Read more
    Categories: Supported by: - -
    -
    • - -
  • - Use user gesture restricted APIs in the Console - Safari WebInspector, showing the Console tool, and the user gesture checkbox -
    - Certain web APIs are user gesture restricted. This means that they can only be called as a result of a user action, such as in a click event handler. -For example, you can't simply put yout website in... - 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. +
  • + Emulate idle detection states + Chrome DevTools' Sensors panel, showing a drop-down list with the different states that can be emulated.
    - Operating systems offer an accessibility feature where the colors shown on the screen are converted to offer higher contrast. When you use this feature, it impacts all the content on the screen: your... - Read more + The Idle Detection API is useful for web developers to detect when the user isn't interacting with their device. This can be useful for chat applications, for example, to mark the user as away. +Note:... + Read more
    Categories: Supported by:
    • -
  • - Edit CSS shadow visually - Animation showing the shadow editor in Edge's Styles pane. +
  • + 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.
    - 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. -Go... - 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:
    • -
  • - Emulate color schemes - Firefox, with DevTools open, showing the Inspector tool, with the color scheme buttons +
  • + Emulate forced-color mode + Edge showing a webpage in forced-colors mode, with the Rendering panel next to it in DevTools.
    - In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers using a light or a dark theme in their operating system. This is useful to style your website in a way t... - Read more + Operating systems offer an accessibility feature where the colors shown on the screen are converted to offer higher contrast. When you use this feature, it impacts all the content on the screen: your... + Read more
    Categories: Supported by:
    • -
  • - 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. +
  • + Edit CSS shadow visually + Animation showing the shadow editor in Edge's Styles pane.
    - 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 + 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. +Go... + Read more
    Categories: Supported by:
    @@ -3939,28 +3936,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 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. @@ -3997,6 +3972,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 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. @@ -4076,31 +4073,6 @@

    171 Alltips tips

    • -
  • - 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: - -
    -
    • -
  • 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. @@ -4134,52 +4106,17 @@

    171 Alltips tips

    • -
  • - 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: - -
    -
    • - -
  • - Discover all the tools - The list of most tools in Edge DevTools, just to illustrate how many there are +
  • + 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
    - 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 + 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:
    • -
  • - Disable all CSS styles on the page - Edge showing a website with no CSS styles. The Console tool is opened on the side, and shows that the expression to remove all stylesheets was run +
  • + 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
    - To remove all CSS styles on a webpage, for example to test the accessibility of a page when styles are disabled, or to verify the order in which content is displayed, you can use the techniques below.... - 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:
    • @@ -4275,21 +4195,18 @@

    171 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 +
  • + Discover all the tools + The list of most tools in Edge DevTools, just to illustrate how many there are
    - 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 + 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:
    • -
  • - Use the debugger statement to pause script execution - The Sources panel in Edge, paused at a debugger statement. +
  • + 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
    - 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 + 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:
    • -
  • - Debug unwanted scrollbars - Firefox DevTools, with the Inspector panel showing the Scroll badge on an element. +
  • + Disable all CSS styles on the page + Edge showing a website with no CSS styles. The Console tool is opened on the side, and shows that the expression to remove all stylesheets was run
    - 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 + To remove all CSS styles on a webpage, for example to test the accessibility of a page when styles are disabled, or to verify the order in which content is displayed, you can use the techniques below.... + 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 +
  • + Debug popups that appear on hover + The Rendering tool in DevTools, showing the Emulate a focused page option
    - 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 + 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 your print CSS styles by simulating print media - Firefox, with DevTools open, showing the Inspector tool, with the print media button +
  • + Use the debugger statement to pause script execution + The Sources panel in Edge, paused at a debugger statement.
    - If you work on a webpage that's supposed to be printed, you probably want to test your print CSS styles. You can use your browser's print preview of course, but what if you need to debug the CSS? -DevT... - 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:
    • -
  • - Debug popups that appear on hover - The Rendering tool in DevTools, showing the Emulate a focused page option +
  • + Debug your Safari Web Apps on macOS + The Develop menu in the Safari menu bar, showing different devices and debugging targets
    - 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 + 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 unwanted scrollbars + Firefox DevTools, with the Inspector panel showing the Scroll badge on an element. +
    + 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 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. +
  • + Debug your print CSS styles by simulating print media + Firefox, with DevTools open, showing the Inspector tool, with the print media button
    - 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 + If you work on a webpage that's supposed to be printed, you probably want to test your print CSS styles. You can use your browser's print preview of course, but what if you need to debug the CSS? +DevT... + Read more
    Categories: Supported by:
    • @@ -4655,6 +4623,35 @@

    171 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: + +
    +
    • +
  • Visualize and debug CSS cascade layers Firefox with a demo page that uses layers, DevTools is opened and shows the Rules panel with two @layer rules @@ -4717,20 +4714,18 @@

    171 Alltips tips

    • -
  • - Customize the way objects look in DevTools - Example of how a ColorCombo object looks in the Console tool of Chrome DevTools +
  • + 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
    - 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 + The console.table method is great for displaying tabular data in the console, but what if the objects your're logging contain a lot of properties, causing a lot of columns to appear in the console? +Fo... + 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 +
  • + Customize the way objects look in DevTools + Example of how a ColorCombo object looks in the Console tool of Chrome DevTools
    - The console.table method is great for displaying tabular data in the console, but what if the objects your're logging contain a lot of properties, causing a lot of columns to appear in the console? -Fo... - 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:
    • @@ -4812,47 +4809,53 @@

    171 Alltips tips

    -
  • - Create your own DevTools theme - Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded +
  • + Copy an object from the console + Chrome devtools' console with a line of code using the copy() function.
    - 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 + The console panel supports a very handy copy() function that stringifies and copies anything you pass to it as an argument, so you can then paste it somewhere else. +For example: copy($$('a').map(a =&g... + Read more
    Categories: Supported by:
    • -
  • - Copy a CSS rule as CSS-in-JS format - Aimation showing the Styles pane in Edge, with the "Copy all declarations as JS" option being used, and then pasting the result in the Console to show that it is formatted. +
  • + Create your own DevTools theme + Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded
    - Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTools and paste it into your code. -Indeed if the CSS you worked on in the Styles panel looks like this:... - 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:
    • -
  • - Copy an object from the console - Chrome devtools' console with a line of code using the copy() function. +
  • + Copy a CSS rule as CSS-in-JS format + Aimation showing the Styles pane in Edge, with the "Copy all declarations as JS" option being used, and then pasting the result in the Console to show that it is formatted.
    - The console panel supports a very handy copy() function that stringifies and copies anything you pass to it as an argument, so you can then paste it somewhere else. -For example: copy($$('a').map(a =&g... - Read more + Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTools and paste it into your code. +Indeed if the CSS you worked on in the Styles panel looks like this:... + Read more
    Categories: Supported by:
    • @@ -4940,38 +4937,6 @@

    171 Alltips tips

    -
  • - 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. -
    - You can extract all the styles of an element in one go by using the Copy styles feature. -No need to go through all CSS rules and properties that apply to the element in the Styles pane, and manually b... - Read more -
    -
    - Categories: - - Supported by: - -
    -
    • -
  • Copy an element's JavaScript path The Elements tool in Edge showing the context menu on an element, with the Copy JS path option. @@ -4999,18 +4964,20 @@

    171 Alltips tips

    • -
  • - Convert font property units - The fonts panel in Firefox, showing the unit conversion drop-down. +
  • + 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.
    - 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 + You can extract all the styles of an element in one go by using the Copy styles feature. +No need to go through all CSS rules and properties that apply to the element in the Styles pane, and manually b... + 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 color formats + Animation of the rules panel in Firefox, showing the color conversion.
    - 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 + 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:
    • -
  • - Speed up or slow down a video - Screenshot of the Console tool showing the playbackRate property +
  • + Copy CSS selector of an element + Edge DevTools, showing how to access the Copy CSS selector option.
    - 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 + 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 color formats - Animation of the rules panel in Firefox, showing the color conversion. +
  • + Convert font property units + The fonts panel in Firefox, showing the unit conversion drop-down.
    - 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 + 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: @@ -5200,17 +5156,20 @@

    171 Alltips tips

    • -
  • - 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: @@ -5230,54 +5189,51 @@

    171 Alltips tips

    safari +
  • + + polypane +
    • -
  • - Create your own simulated devices - Animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices. +
  • + 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.
    - 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 + 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:
    • -
  • - 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. +
  • + Change the color theme of DevTools + the settings panel in Edge showing the Theme drop-down.
    - 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 + 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:
    • -
  • - Access results from recent Console evaluations - The Console in Firefox DevTools showing how using $_ refers to the previous Console result +
  • + Automatically logging name and value in console.log() + Animation showing the different ways the variables are logged with and without curly braces.
    - 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 + 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:
    • +
  • + Create your own simulated devices + Animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices. +
    + 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: + +
    +
    • +
  • 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.