3 years ago
TechAtHeart
in English · 2,698 Views
likes 7clips 7comments 1
8 Chrome Developer Tools You Should be Using
Chrome Developer Tools are a set of web authoring and debugging tools built into your Google Chrome browser. These tools are handy and completely free, so I recommend that you take advantage of them. Here are some steps to start using them. To access the Developer Tools from Chrome follow these steps: - Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools. - Right-click on any page element and select Inspect Element. - The DevTools window will open at the bottom of your Chrome browser. You'll notice 8 main groups that are available for you to use: • Elements - lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. • Resources - lets you inspect your application's local data sources, including IndexedDB or Web SQL databases, local and session storage, cookies, and Application Cache resources • Network - records information about each network operation in your application, including detailed timing data, HTTP request and response headers, cookies, WebSocket data, and more • Sources - lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger • Timeline - lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application • Profiles - lets you profile the execution time and memory usage of a web app or page • Storage - helps you track, query, and debug local browser storage • Audits - can analyze a page as it loads and provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness • Console - enter arbitrary JavaScript and interact with your page [2] I hope you find these tools useful. Do any of you use them? One of my favorite things to use to check responsiveness is to click on the mobile phone icon to see your website on mobile devices. Sources: [1] https://developer.chrome.com/devtools [2] http://www.html5rocks.com/en/tutorials/developertools/part1/
TechAtHeart clipped in 1 collections
1 comment
Yes, checking responsiveness is great with DevTools. I use these frequently, even though I am not a web developer. Sometimes I am curious how something is done and look at the source code to take a peek. It's a guilty pleasure of mine.
3 years ago·Reply