I made a challenge for myself to post a quick Chrome Dev Tools tip on Twitter everyday for 30 days. Browse them all below!
⚡️Chrome Dev Tools tip: On any tab hit CMD (or CTRL) + P to be able to find and open any file that's been loaded. Great for jumping quickly to source files. pic.twitter.com/zmkydlzuvY
— Stuart Ashworth (@stuartashworth9) June 23, 2021
⚡️ Chrome Dev Tools tip: You can use advanced syntax to filter Network requests by attributes instead of just name. For example, find failed requests with 'status-code:500', find big resources with 'larger-than:100k' or negate a filter with a '-' prefix. #chromedevtools #webdev pic.twitter.com/0nGViA00BS
— Stuart Ashworth (@stuartashworth9) June 24, 2021
⚡️Chrome Dev Tools tip: You can access the 5 previously selected DOM nodes in the Console, using the magic variables $0-$4 #chromedevtools #webdev pic.twitter.com/xy5EFQsYFk
— Stuart Ashworth (@stuartashworth9) June 25, 2021
⚡️Chrome Dev Tools tip: You can quickly jump to a DOM node that's been logged to the Console by right-clicking and choosing 'Reveal in Elements panel'. Great for zooming to a deeply nested node. #chromedevtools #webdev pic.twitter.com/kdpbmoKKCb
— Stuart Ashworth (@stuartashworth9) June 26, 2021
⚡️Chrome Dev Tools tip: Use the global function $x(...) in the Console tab to find elements on your page using an XPath query. #devtools #javascript #webdev pic.twitter.com/rB8EJXhuWH
— Stuart Ashworth (@stuartashworth9) June 27, 2021
⚡️Chrome Dev Tools tip: Quickly cache a reference to a DOM node by right-clicking it and choosing 'Store as global variable'. You can then access it using the variable 'temp1', which will increment as you repeat the action. #devtools #javascript pic.twitter.com/vVe8SZ9Ha6
— Stuart Ashworth (@stuartashworth9) June 28, 2021
⚡️ Chrome Dev Tool Tip: Show the flexbox overlay on an element by clicking the 'flex' badge beside that element. This makes it easier to visualise the layout on screen. #devtools #javascript #webdevelopment pic.twitter.com/2oy0lJMVYj
— Stuart Ashworth (@stuartashworth9) June 29, 2021
⚡️ Chrome Dev Tools tip: Following on from yesterday's tip, you can toggle the flexbox overlay for any flexbox element from the Element tab's Layout section. #devtools #javascript #webdevelopment pic.twitter.com/pZq8l2CoiO
— Stuart Ashworth (@stuartashworth9) June 30, 2021
⚡️ Chrome Dev Tools tip: You can use '$(...)' in the Console tab as a shorthand equivalent to 'document.querySelector'. Save your fingers some work! 😀 #javascript #chromedevtools #webdevelopment pic.twitter.com/gi5r7NPZnu
— Stuart Ashworth (@stuartashworth9) July 1, 2021
⚡️ Chrome Dev Tools tip: You can also use '$$(...)' as a shorthand equivalent to 'document.querySelectorAll(...)'. Assuming you don't _need_ a NodeList of elements. #devtools #javascript #webdevelopment pic.twitter.com/Xli7Km3cia
— Stuart Ashworth (@stuartashworth9) July 2, 2021
⚡️Chrome Dev Tools tip: Find out what code is modifying an element (or its children) by using DOM Breakpoints. Right-click an element & select an option from the 'Break On' slide menu. This will break your JavaScript code when the element is modified. #javascript #chromedevtools pic.twitter.com/MzYOezjhgc
— Stuart Ashworth (@stuartashworth9) July 5, 2021
⚡️Chrome Dev Tools tip: View and modify existing DOM Breakpoints by opening the Element tab's DOM Breakpoints section. From there you can disable or remove them. @ChromeDevTools #javascript #webdevelopment pic.twitter.com/GcHMbNa9M0
— Stuart Ashworth (@stuartashworth9) July 5, 2021
💡Chrome Dev Tools tip: Copy strings straight to the clipboard from the Console tab using the 'copy' function. Combine it with a DOM query and pull stuff straight from your page! h/t @euperia @ChromeDevTools
— Stuart Ashworth (@stuartashworth9) July 6, 2021
#javascript #webdevelopment pic.twitter.com/IkxhgePD9i
💡Chrome Dev Tools tip: You can profile your code using the JavaScript Profiler to see what parts of your code are taking time and resources to run. @ChromeDevTools #javascript pic.twitter.com/QQ6wyuoLxE
— Stuart Ashworth (@stuartashworth9) July 7, 2021
💡Chrome Dev Tools tip: Capture a JavaScript Profile directly in your code using `console.profile('Test')` to start it and `console.profileEnd()` to stop. It will then show in the JavaScript Profiler tab. @ChromeDevTools #javascript #webdevelopment pic.twitter.com/U7DFpfniKp
— Stuart Ashworth (@stuartashworth9) July 8, 2021
💡Chrome Dev Tools tip: Toggle the 'hexagonal pause' button on the Sources tab to force your code to pause when it hits an exception. You can then investigate what's going on. Tick the box below to make it pause even if it's wrapped in a try/catch #devtools #javascript pic.twitter.com/SQVJrw3k5u
— Stuart Ashworth (@stuartashworth9) July 11, 2021
💡Chrome Dev Tools tip: Click the eye in the Console tab to add a Live Expression. This will display the output of it and constantly update. Really useful alternative to using tons of console.logs #devtools #webdevelopment pic.twitter.com/pRApcI0oh8
— Stuart Ashworth (@stuartashworth9) July 11, 2021
💡Chrome Dev Tools tip: Add a logpoint to have an expression logged to the console at a specific line of code to get insight into what's going on without adding console.logs explicitly. Right click a line number and click 'Add logpoint...' #devtools #javascript pic.twitter.com/Ux1LyKBAEP
— Stuart Ashworth (@stuartashworth9) July 12, 2021
💡Chrome Dev Tools tip: Ignore all breakpoints and exceptions in a file by right-clicking in it when open in Sources and choose 'Add script to ignore list'. This is great for ignoring framework files. #chromedevtools #javascript #webdevelopment pic.twitter.com/0nP83VJ1tY
— Stuart Ashworth (@stuartashworth9) July 13, 2021
💡Chrome Dev Tools Tip: Use console.count to output how many times a piece of code is executed. You can reset the counter with console.countReset. #devtools #javascript pic.twitter.com/v9hqn2IUXz
— Stuart Ashworth (@stuartashworth9) July 14, 2021
💡Chrome Dev Tools tip: You can copy a network request as a 'fetch' or 'cURL' snippet by right-clicking it and sliding the Copy menu. You can then paste it elsewhere and run again. Very handy for debugging! #chromedevtools #javascript pic.twitter.com/29OZWjgGCv
— Stuart Ashworth (@stuartashworth9) July 15, 2021
💡Chrome Dev Tools tip: You can test how your sites perform on slower networks but throttling the connection in the Network Conditions tab. Choose a preset or set up your own throttle speed. #chromedevtools #javascript pic.twitter.com/qOxeAE8r3t
— Stuart Ashworth (@stuartashworth9) July 15, 2021