前端人员必备技能--Chrome浏览器的开发者工具

2017/05/28 22:40
阅读数 265

1.Chrome开发者工具

在Chrome浏览器中,按Ctrl+Shift+i 就可以开启开发者工具,默认是显示在右侧边,如下图所示。

其中:

  1. 箭头图标:选择之后,可以在页面上点选你关注的页面元素,会自动跳转到元素对应的代码;
  2. 手机图标:选择之后,会以手机的UA(UserAgent)以及手机屏幕尺寸去模拟访问网页;
  3. Memory:当前页面的内存占用情况,可用于大页面的性能调优;
  4. Security:当前页面的安全情况,如果是HTTPS链接,会显示证书等信息;
  5. Elements:当前页面的元素情况(包含后期js操作后的元素),和页面的源代码有区别的;是用来查看和学习借鉴别人网页的好工具。
  6. Network:网络传输情况,可以包括请求和响应的Header和时间等信息,可以用来大页面的性能调优以及模拟限速。
  7. Console:主要是一些报错信息和程序员打印出来的信息,算是js版的system.out,比Alert实用多了。
  8. Source:显示了页面的所有文件从哪些远端服务器传输的,可以方便预览图片和js等文件内容。
  9. Performance:性能分布,是页面性能调优的工具;
  10. Application:主要包括本地存储,session存储,cookie,页面框架结构等。
  11. Audits:页面性能审计,会给一些提高网络性能和页面性能的建议;
  12. More Tool:包含JS性能分析、页面分层、自定义终端设备UA、模拟传感器等功能。

2、常用功能

2.1 Elements

A:触发有两种方式,第一最简单的在页面的元素上右键,选择最下面的“检查”,即可打开开发者工具,并自动定位到该元素;还有就是在开发者工具打开的状态下,使用左上角的箭头按钮,点选页面元素。

B:可以查看的内容:页面的HTML代码和样式,包括元素样式(与上级元素)的继承关系。

C:可以进行的操作:

可以在元素代码里面添加、删除或者修改,页面会立即生效;

可以在元素的style里面添加、删除或者修改样式,页面会直接生效;

可以选择复制页面元素的代码,再顺便把style里面的样式也复制一下。

 

D:应用场景:

  • 看见别人页面中的好东西,想借鉴一下;
  • 页面布局调试和样式调试;

举例:在百度地图页面,如果想要知道某个区域对应的地图瓦片的X、Y序号怎么办? 这个工具会恨简单地帮到你:

 

2.2 Network

比如我也想做一个https://www.sogou.com/类似风格的网页,简单的很

  • 开一个新的Tab,开启开发者工具,URL中输入网址;

  • 在Network Tab里你会看到浏览器所有的网络请求序列,以请求的时间为序列。有两种方法保存文件:第一个是右键列表,选择Open in New Tab,再保存;或者在右侧的Preview预览后保存。
  • 你需要保存的静态文件包括HTML,JS,CSS和PNG/JPG/GIF等图片。
  • 把所有的文件组织在一起,把HTML页面中的引用路径修正一下,比如原来的绝对域名路径修改成相对路径。
  • 放在本地服务器中显示并调试,修改并增加你自己的内容。

A:关于网络请求:

Header中有请求的路径和方法,HTTP状态 (200或者302,404等),服务器IP地址,请求的Header,Response的Header,请求参数,Form数据。

B:关于Preview

Preview中包含响应的预览,如果是静态内容(如图片,js或css),则直接预览;如果是动态请求,则显示的是服务器响应内容,这在一些异步提交应用的调试中非常实用,你可以直接看到服务器响应内容,告别Alert吧。

C:关于Timing

Timing是单个请求的详细时间,如果你的页面有性能问题,你可以查看每个元素的时间。

 

D:应用场景:

  • 看见别人页面上的好东西,想复制;
  • 请求的参数调试;
  • 响应的结果调试;
  • 页面加载时间慢,调试;

 

插播一个关于Gzip的知识点:

HTTP网络传输过程中,是可以使用压缩编码的,所有的Client在发送HTTP请求的时候,会把自己支持的压缩算法写到Request的Header中,比如Accept-Encoding: gzip, deflate, sdch, br; 如果请求中没有这个Header,服务器就只能原始内容传输了。其中gzip, deflate都是无损的压缩算法。

服务器在响应的时候,在Response的Header中也会告诉Client,自己传输的内容使用的是哪种编码,如

Content-Encoding: gzip。

所有浏览器默认都是支持Gzip的,常见的服务器(IIS/Tomcat)都支持配置成Gzip的;因此如果你的js/css/html页面比较多,或者你服务器的出口带宽比较紧张,你可以考虑开启服务器的Gzip。

 

2.3 Console

A:关非HTTP200错误

404是HTTP请求中比较常见的错误,比如url不正确,css/js链接路径不正确等;

504是服务器错误;

如果你的页面有异常,你第一个可以检查的就是Console;

B:JS脚本错误

JS脚本错误,会在Console中列出,常见的错误包括对象未定义,或类型不正确,数组越界,对象不存在等;

C:程序员打印的信息

调试信息,如对象值,计算结果等。

 

D:应用场景

  • 错误检查
  • 程序调试输出
  • 百度用来招聘程序员也是牛B的很啊

 

2.4 Audits

一些常见的网络性能和页面性能建议:

提升网络性能的建议主要包括开启Gzip、利用Cache、不同的Domain同步加载等;

提升页面性能的建议包括分析css中未使用的样式占比,可以删除多于css样式。

 

2.5 手机终端调试

你如果你开发的网站支持手机端接入,并且需要支持特定机型和特性网络环境,你可以用Chrome工具了。

A:开启手机终端模式,并选择你的手机终端类型:

如 同样是输入maps.baidu.com,则会自动跳转到手机百度地图页面。

关于支持特定终端类型,在Edit中可以添加。需要填写手机的横向和纵向分辨率,并要写UA字符串。 比较新的手机浏览器都支持查看UA信息,如果实在老款的手机,无法查看UA,可以写一个简单的服务器程序,用这个手机去访问,服务器后台会看到请求中带的UA字符串。

B:有两个路径开启网络限速,Network中,选择throttling或者在More Tool中,打开Network Condition并选择你的Network throttling:

3 结语

关于Chrome的开发者工具,每个Chrome版本升级,开发者工具都会更新很多内容。最近的开发者工具更新主要集中在页面的性能分析方面,研究的不深。

程序员不仅仅要把页面功能做出来,适当也要注意一下性能,因为这关系到用户体验!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部