Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
I love to develop and debug using Chrome Dev Tools. I find that the dev tools are generally easy to use, well documented and there are constantly new and experimental features coming out. I often use the Dev tools to pause code execution, inspect variables, and to perform Mobile First web development. In this post Iâll highlight some tips and shortcuts to increase your productivity.
Note: These tips are scoped to mac users.
Pretty print
Letâs jump right in by making things look nice! Hello gorgeous, I mean Pretty Print :)
Clicking on the â{ }â on the bottom left hand side will Pretty print your js, css, or html
Another great display trick is console.table. Console.table displays data as a table which can greatly improve readability.
In the âSourceâ tab of the Dev Tools, you can add an expression to the watch list. This can be very helpful by allowing you to see how a variable changes over time.
You can set XHR/fetch breakpoints in the Sources tab, on the right side anytime a url contains a specific string or on any XHR/fetch request. This will break on that xhr call.
Another neat breakpoint trick is to break if any of an elementâs children are modified. This is what happens when break on âSubtree Modificationsâ is selected.
In the elements tab, right-click an element, âBreak onâ, âsubtree modificationsâ to set this. When a script traverses that elementâs children the debugger will stop.
You can also modify html directly in the tree.In the âelementsâ tab, once you have an element selected, you can right click and edit/change the html inline.
If you are searching through your html and you come across an element and would like to see what it looks like, click the element, right click, and select âScroll into viewâ this will bring up the element. This is particularly handy when youâve been debugging for a while and forget where you were or canât seem to find that element on that page.
Would you like to see how a pseudo state look on a certain element? Find the element, right click, select âForce stateâ and select the pseudo state to force. This can be really helpful in checking to see what an elementâs hover or visited state is.
It might be helpful to replay a network request via CURL. Hereâs a link to a post I found that walks you through that process.
https://umaar.com/dev-tips/3-copy-as-curl/
Shortcuts:
Open Dev tools: â + Option +Â j
Open file: â +Â p
Toggle between dev tool docking positions: â + shift +Â d
Navigate to a specific line of code: Control +Â g
Clear console: â +Â k
Toggle device mode: â + shift +Â m
getEventListeners($(âselectorâ)) returns an array of objects thats contains all of the events that are bound to that element
Reference the currently selected element in the console: type â$0â
Get the value of the last operation from console: type â$_â
Write commands that span multiple lines in console: shift +Â enter
Find an html/css element on the page: â +Â f
In the screenshot below I am searching for âts-thumbâ.
Capture a screenshot: command + shift + p over an element that you would like to capture
If you are interested in playing around with experimental Chrome Develop features, check out chrome://flags/. It allows you to turn certain Chrome features on and off.
Here are some additional resources for debugging using Chrome Developer Tools:
https://developers.google.com/web/tools/chrome-devtools/javascript/
https://flaviocopes.com/chrome-devtools-tips/
https://developers.google.com/web/tools/chrome-devtools/shortcuts
https://blog.angular-university.io/javascript-debugging-tips-using-chrome-dev-tools-deb-js-and-more/
Happy Debugging!
Tips and Tricks for Debugging in Chrome Developer Tools was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.