3 main browsers web development tools

A fast loading page to a large extent save the user's browsing page time cost, as a webmaster, we have to find some solutions, traditional in the browser "right-view source code" is outdated, it can not do good code inspection, as a good web developer, should continue to learn and try new things. Below I will introduce the next three major browsers Web developer tool Introduction and how to use.

Firefox (Firefox) Firebug and YSlow

Firebug is a very mature and sophisticated tool (click here to download), can be used under various browsers (Ie,firefox,opera, Safari), usually I use the most in Firefox browser (Firefox), we can use it to debug, edit, or even the deletion of any site CSS, HTML, DOM, and JS code. In addition, Firebug function is also very powerful, such as Html,css,dom viewing and debugging, the overall analysis of the site, etc., in short, is a complete set of powerful Web development tools.

How to use Firebug, I would like to introduce the following chrome development tools, their use is the same, I am not too much introduced here, focusing on the use of Firebug and YSlow, YSlow is running under the Firebug window, so to run YSlow, Firebug must be installed.

Install the two browser extensions, click YSlow, will pop up YSlow run the interface, click "Run Test" to start the analysis of the Web page. Below I will use one of the buttons to "Statistics" compared to the "Lou blog" and "Shao Jun Blog" Page load speed.

Through the diagram we can clearly see what a page occupies a large space, the left-hand chart shows the page is not using the cache load, that is, the actual size of the Web page, the right side for the page to use cached page load.

such as Lou Blog Original is 172K, Use the cache for 18.1K, and the original size of the Shao Jun blog is 196.7K, using the cache for 75.6K, that is, in the same network environment, open my blog need to download 18K things, open Shao Jun blog need to download 75.6K things, which page open fast on the clear.

Fortunately, YSlow told us which elements of the Web page occupy space, we can be targeted to optimize. For example Shao Jun blog response html/text, images and JS code too much, so you can focus on streamlining the HTML, JS code, modify the size of the page picture.

Google Chrome development tools and Safari development tools

You may be wondering why Lou Google Chrome development tools with safari development tools because their development package tools are based on WebKit open source projects, which means that both browsers share the same code base and even share the same layout.

Chrome's development tools are very similar to Firefox's Firbug, which not only helps you diagnose, fix problems in Web page loading, script execution, and page rendering, but also helps you maximize the CPU and memory usage of your Web pages or network applications.

Below I will introduce the actual use method, many friends do not know my blog navigation bar on the "surprise" gif picture is how to add, with "Chrome development tool" can easily see the principle of implementation.

(Step one) Open the Chrome Developer tool and find this "surprise" gif without worrying that you can't find the code location because the mouse clicks anywhere and there's a light blue frame tip on the page. (The second step) after you find this line of code, you will find that the navigation more than a id= "gnew" attribute, click this (third step) right will automatically jump out of the #gnew CSS properties. It's easy to know how the code is written, and then paste the code into your site. It's easy, huh?

This is just one of the tips, there are more skills to wait for your excavation, in order to give you a better understanding of these two development tools, you can click on the following official introduction: Google Browser development tools and Safari development tools.

IE Browser development tool developer Toolbar

Considering that IE is still the most commonly used browser, if the web developer using IE can use this development tool, although the interface looks a bit old and unlike other tools, Developer toolbar can be used as a supporting development tool, I do not introduce more here, the usage is basically the same.

Microsoft has also provided information on downloading and using Internet Explorer developer toolbars. Interested friends can point to see, need to pay attention to is: 360, Sogou, QQ, surfing the main kernel of such browsers are IE kernel, so ordinary IE can use these browsers.

Written at the end:

I just introduced the three major browser development tools in some of the tips, there are many features waiting for you to explore it, whether it is IE 6/7 Internet Explorer Developer Toolbar, Chrome browser development tools or IE 8 from the develop Er Tools, or Firefox's Firebug, as well as Safari's web Inspector and Opera's Dragonfly, have only one purpose-to help Web developers make Web development more convenient and efficient.

Unless noted, the article is Lou original, reproduced please indicate the source, thank you.

This article address: http://lusongsong.com/reed/359.html