三大主流浏览器Web开发工具

lite6

一个快速加载网页在很大程度上节约用户的浏览页面时间成本，作为一名站长，我们要寻求一些解决办法，传统的在浏览器中  “右键—查看源代码”已经过时了，它不能做良好的代码检查，作为一名优秀的web开发人员，应该不断学习和尝试新事物。下面我就介绍下三大主流浏览器的web人员开发工具介绍及其使用方法。  
火狐（Firefox）的Firebug和YSlow  
Firebug是一个非常成熟和完善的工具（
点此下载
），各种浏览器下都能使用（IE，Firefox，Opera，  Safari），通常我在火狐浏览器（Firefox）用的最多，我们可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与  JS代码。除此之外，Firebug功能还很强大，比如html，css，dom的查看与调试，网站整体分析等等，总之就是一整套完整而强大的 WEB开发工具。  


  
如何使用Firebug，我会想下面的Chrome开发工具中介绍，它们的使用方法是一样的，我在这里就不过多介绍了，重点介绍下Firebug和YSlow的使用，Yslow是运行在Firebug窗口下，所以要运行YSlow，必须安装Firebug。  
安装好这两个浏览器扩展后，点击YSlow，就会弹出YSlow运行界面，点击“Run Test”就开始对网页进行分析。下面我就以其中过一个按钮进行  “Statistics”对比“卢松松博客”和“肖俊博客”的网页载入速度情况。  


  
通过图示我们能很清楚的看到一个网页什么占用空间较大，左侧图表显示的是网页在不使用缓存加载的情况，也就是网页的实际大小，右侧为网页使用缓存的页面加载情况。  
如卢松松博客原始是172K，使用缓存后为18.1K，而肖俊博客原始大小是196.7K，使用缓存后为75.6K，也就是说在相同网络环境下，打开我博客需要下载18K东西，打开肖俊博客需要下载75.6K东西，哪个网页打开速度快就一目了然了。  
幸运的是YSlow告诉了我们网页哪个元素占用空间大小，我们就能有针对性能的优化。比如肖俊博客反应出HTML/text、images和JS代码过多，所以可以着重精简下HTML、JS代码，修改网页图片大小。  
Google Chrome开发工具和Safari开发工具  
你也许奇怪为什么卢松松将Google  Chrome开发工具和Safari开发工具放在一起，因为它们的开发包工具都是基于webkit开源项目开发的，这意味着这两个浏览器共享相同的代码基础部分，甚至共享同一布局。  
Chrome浏览器的开发工具与Firefox的Firbug非常类似，它不仅仅能帮助您诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题，还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。  
下面我就介绍下实际使用方法，很多朋友不知道我博客导航条上的“惊喜”的gif图片是如何加上的，用“Chrome开发工具”就能很容易看到实现原理。  


  
（第一步）打开Chrome开发工具，找到这个“惊喜”gif图片，不必担心你找不到代码位置，因为鼠标点击任何地方，在网页上都会有个浅蓝色框架提示。（第二步）找到这行代码后，你会发现这个导航多中多了个id=“gnew”属性，点下这个（第三步）右侧会自动跳出#gnew的CSS属性。这样就很容易知道代码是怎么写的了，然后把代码粘贴到自己网站即可。很容易吧？  
这只是其中一个小技巧，还有更多技巧等待你的挖掘，为了让大家更好的理解这两个开发工具，你可以点击下面的官方介绍：
Google浏览器开发工具
和
safari开发工具
。  
IE浏览器开发工具Developer Toolbar  


  
考虑到IE浏览器仍是使用最常用的浏览器，如果是使用IE的web开发人员可以使用此开发工具，虽然界面看起来有点老了，而且不像其他工具功能那么多，Developer  Toolbar可以作为一款辅助开发工具，我在这里就不多做介绍了，用法基本一样。  
微软官方也提供了
Internet  Explorer开发人员工具栏
的下载和使用信息，有兴趣的朋友可以点开看看，需要注意的是：360、搜狗、QQ、遨游这类浏览器的主内核都是IE内核，所以普通IE能使用的这些浏览器都能用。  
写在最后：  
我只是介绍了三大主流浏览器开发工具的部分小技巧，还有很多功能等待你的摸索呢，无论是 IE 6/7 的 Internet Explorer  Developer Toolbar 、Chrome浏览器的开发工具或者是 IE 8 自带的 Developer Tools，还是 Firefox 的  Firebug ，以及 Safari 的 Web Inspector 和 Opera 的  Dragonfly，他们的宗旨只有一个——帮助web开发人员更方便、更高效地进行Web开发。  
除非注明，文章均为卢松松原创，转载请注明出处，谢谢。  
本文地址：
http://lusongsong.com/reed/359.html