Lu songsong: three mainstream browser web development tools

Loading a webpage quickly saves the time cost for users to browse the page. As a webmaster, we need to find some solutions.
"Right-click to viewSource code"It is out of date, and it cannot do well.CodeCheck that as a good web developer, you should keep learning and trying new things. Next I will introduce
Introduction to web development tools and how to use them.

Firebug and yslow of Firefox

Firebug is a very mature and complete tool (Click here to download ),
All browsers can be used (ie, Firefox, opera,
Safari). I usually use Firefox most frequently. We can use it to debug, edit, or even delete CSS, HTML, Dom, and
JS Code. In addition, firebug features are powerful, such as viewing and debugging HTML, CSS, Dom, and overall website analysis. In short, it is a complete and powerful set of functions.
Web development tools.

How to Use firebug, I will introduce them in the chrome development tools below. They are used in the same way. I will not introduce them here. I will focus on firebug and yslow usage, yslow runs in the firebug window. To run yslow, you must install firebug.

After these two browser extensions are installed, click yslow to bring up the yslow running interface. Click "Run test" to start webpage analysis. Next I will use one of the buttons to compare the loading speed of "Statistics" with "Lu songsong blog" and "Xiao Jun blog.

The figure below clearly shows the space occupied by a webpage. The left-side chart shows that the webpage is not loaded using cache, that is, the actual size of the webpage, the right side shows the page loading status when the webpage uses cache.

For example, the original size of the Lu songsong blog is 172 K, and the cached size is 18.1 K. The original size of the Xiao Jun blog is 196.7 K, and the cached size is 75.6 K, that is, in the same network environment, to open my blog, you need to download 18 K items. To open Xiao Jun's blog, you need to download 75.6k items. The speed of opening a webpage is clear.

Fortunately, yslow tells us which element occupies space on the webpage, And we can optimize the performance. For example, Xiao Jun's blog shows that there are too many html/text, images, and JS Code, so you can focus on streamlining HTML and JS Code and modifying the webpage image size.

Google Chrome development tools and Safari development tools

You may wonder why Lu songsong put Google Chrome development tools and Safari development tools together, because their development kit tools are developed based on WebKit Open-source projects, this means that the two browsers share the same basic code and even the same layout.

Chrome's development tool is very similar to Firefox's firbug. It not only helps you diagnose and fix problems in Webpage loading, script execution, and page rendering, it also helps you understand your web pages or network applications to the maximum extent.ProgramCPU and memory usage.

Next I will introduce how to use it. Many friends don't know how to add the GIF images on the navigation bar of my blog, with the "Chrome development tool", you can easily see the implementation principle.

(Step 1) Open the chrome development tool and find this "surprise" GIF image. You don't have to worry that you can't find the code. Because you click anywhere, there will be a light blue frame on the webpage.
Prompt. (Step 2) after finding this line of code, you will find that there is an additional id = "gnew" attribute in this navigation, click this (Step 3) the CSS attribute # gnew is automatically displayed on the right. In this way
It is easy to know how the code is written, and then paste the code to your website. Is it easy?

This is only one of the tips, and more skills are waiting for your exploration. To better understand the two development tools, you can click the official introduction below: google browser development tools and Safari development tools.

Developer toolbar, IE browser Development Tool

Considering that Internet Explorer is still the most commonly used browser, Web developers who use Internet Explorer can use this development tool. Although the interface looks a little old, it does not have as many functions as other tools, developer toolbar can be used as an auxiliary development tool. I will not introduce it more here, and its usage is basically the same.

Microsoft also provides download and use information for the toolbar of Internet Explorer developers. If you are interested, click here. Note the following: 360. The main kernel of browsers such as sogou, QQ, and travel is ie kernel, so these browsers can be used by General IE.

Conclusion:

I just introduced some tips about the three major browser development tools, and there are many other functions to be explored by you, whether it is Internet Explorer in IE 6/7
Developer toolbar, Chrome browser development tool, or developer tools that come with IE 8, or
Firebug of Firefox, Web Inspector of safari, and
Dragonfly has only one purpose-to help Web developers perform web development more conveniently and efficiently.

Unless specified,ArticleAll are original by Lu songsong. Please indicate the source for reprinting. Thank you.

Address: http://lusongsong.com/reed/359.html