If you’re the curious programmer type like me, you may have found your way to Chrome DevTools, the most advanced new way to observe the source and scrutinize the code of any page. The old “View Source” option (Ctrl+U) just doesn’t cut it.
Within this column I’m glad to introduce you to what I think about the Internet Developer’s new best buddy, Chrome Developer Tools. This extensive suite of tools were built to generate the web developer’s life easier. Hopefully you will agree and enjoy some of the advantages after studying.
The Chrome DevTools review window is launched by many handy keyboard shortcuts such as Ctrl+Shift+I or F12 or by right clicking any area or element of a webpage and picking Inspect Element.
Chrome DevTools Shortcuts
This wonderful set of tools built right into your browser allow you to inspect and edit page content, HTML and CSS on-the-fly, without any programming knowledge required. But, that’s just the beginning. Continue reading to discover that DevTools has to offer.
Interior Chrome DevTools
Elements Tool
The primary Chrome Developer Tools window shows the entire DOM tree of your webpage’s HTML code. You can select an individual element and right-click double-click or to to interact with it.
The more compact frame to the right enables you to edit CSS styles and see individual DOM properties.
Tips on Using the Elements Panel
- Click on the white-space across the Matched CSS Rules fashions to put in a fresh line.
- Utilize Command+F to search for text or code inside DevTools.
- Mouse scrutinize some other DOM element to look at its exact pixel size.
- Drag and drop any node to re-arrange its place on the webpage.
- Should you use a caching plugin to WordPress locate the plugin option to disable caching for known users so you do not have to delete the cache every time you create an upgrade.
- Should you make some edits to CSS rules that you enjoy, just copy and paste them directly to your source CSS file.
For more advanced programmers, added panels feature more tools that allow you to see page Resources such as scripts and images, Network functionality info, script debugging information under Sources, and other useful tools for optimizing.
Below I have outlined short descriptions of each panel as well as their uses.
- Resources — The tools panel enables you a fresh overview of all of the files, images, scripts, cookies and other data loaded by means of a page.
- Network — View real-time information on tools downloaded over the system. This could help identify files that are lost or taking a very long time to load.
- Sources — Inspect and edit the source of scripts that are loaded from the inspected page. This is an invaluable tool for debugging JavaScript.
- Timeline — Just hit the list button and then browse to your website to look at a live flow detailing how long it takes for each source to load. This might help you find places for improvement.
- Profiles — much like the Timeline board, the Profiles panel offers more advanced profiling of JavaScript execution time.
- Audits — Yet another tool dedicated to speed calculating (and surprisingly perhaps not the last), the Audit instrument offers an analysis of your stylesheets, images, scripts and more with suggestions for improvement.
- Console — More advanced developers will enjoy the ability to enter commands and interact with JavaScript code from a command line style prompt.
Vital Bonus: Page Rate Extension
You may have figured by the amount of attention these tools set on website optimization that site loading times are vitally important for web developers to pay attention to. Google has recently allow the word out that page rate currently plays a major role in search results positions.
The PageSpeed expansion for Chrome Developer Tools is an awesome instrument manufactured by Google that scans your website, reports the loading times and mark your website.
A comprehensive set of suggestions known as PageSpeed Insights can be obtained for optimizing your website for speed. I have checked off almost a dozen items to get DotSauce Magazine loading ordeal, but I still have a list of items I could improve on.
Correcting errors and making the suggested updates will uncertain the best experience for your users and ultimately improve your search rankings.
Advanced Bonus: Tincr Extension
Advanced programmers who are working with a neighborhood staging environment, prepare to be amazed.
The Tincr expansion for DevTools allows really cool features such as live porting of CSS and JavaScript displays and the capability to save changes directly from Chrome.
Browser Dimensions & Device Screening With DevTools
I recently discovered a neat tool for device testing from the Chrome Developer Tools configurations. Click the little gear icon () in the base of this window to start the DevTools Settings overlay.
Select Overrides to get an great set of features for overriding your user-agent, browser window dimensions and emulating touch events.
Further DevTools Resources
Chrome DevTools has it’s very own web collection. It is that cool.
To learn and discover insightful tutorials and also time-saving tips linked to Chrome Developer Tools check out The Breakpoint net show. There are currently 8 episodes featured in this series.
Want a complete step by step walk-through? Take about the free Discover DevTools course at Code School. This course features 17 video lessons to get you up to speed.
Get To Know Your New Best Buddy
In case you haven’t already, give it a try! Establish the DevTools window and poke around some. If you glance in my code, I do not mind.
The more you familiarize yourself with DevTools and all of its features, the more practical and time-saving it’s.
I would love to hear how you’re using Chrome DevTools through your web development work-flow or over an everyday basis. Please make a comment below with your ideas, questions or compliments concerning DevTools.
Chrome Developer Tools: The Internet Developer’s Best FriendDotSauce Magazine
source http://www.pendragoninteractive.com/chrome-developer-tools-the-internet-developers-best-friend/
No comments:
Post a Comment