dishnas.blogg.se

• CTRL U GOOGLE CHROME PROFESSIONAL

Note that you can not only change the attribute values but also the attribute names or even element tag names. Edit element attributes from the Elements panel by double-clicking them You can modify element attributes and content right from the Elements panel by double-clicking on the item you want to change.

Open the console from any DevTools panel by pressing ESC Edit the page liveĪ great advantage of using the DevTools is the ability to edit the state of your app "live," which means you will immediately see your changes without having to reload the page. Thankfully, I can bring up the console without leaving the current DevTools tab by pressing ESC. I find myself needing to use the console quite often for quickly manipulating the DOM elements, analyzing the current variables during debugging, or executing functions from the app. The "Disable cache" option in the Network panelĪnd don’t worry, this option only applies to the current page and is only active when the DevTools are open. Productivity increased, confusions reduced. How many times have you observed that your saved changes don’t show up, only to later realize that it was due to caching? Do yourself a favor and toggle one important option: "Disable cache" in the Network tab.ĭone.

CTRL U GOOGLE CHROME PROFESSIONAL

I don’t know about you, but every time I use this shortcut, I feel like a professional gunslinger! Source: Giphy Disable cache to get back some sanityĪ typical development cycle consists of modifying files on your system and reloading the page to observe the results. Open the DevTools and jump straight to the inspector tool via Ctrl+Shift+C There’s a special shortcut that gets you there even faster: hitting Ctrl+Shift+C will open the DevTools and invoke the inspector tool. In most cases though, you also want to inspect an element on a page. You can quickly open the DevTools by simply hitting the F12 key. Thanks to a clean UI and continuous improvements to meet real-world needs, the tool has become the go-to live development environment that surpasses many contemporary IDEs in both functionality and performance.īut how productive are you with the DevTools in your daily development workflow? I’d like to share some of my favorite shortcuts that will help you master the tool.

It is impossible to imagine modern web development without the use of Chrome DevTools.