个人博客
专注IT梦想的地方

关于Chrome浏览器的调试介绍

首先,关于Chrome浏览器下的相关调试菜单介绍,如下:(Firefox 中需独立下载 Firebug),更多关于 Google Chrome DevTools 的信息可以在这里(请使用”专用网络“打开)找到。【快捷键为F12

Chrome浏览器调试窗口中常用的几个标签页:

Elements:用于查看页面html代码

NetWork:用于查看页面的网络请求

Sources:用于查看页面所加载的源文件

Timeline:用于查看页面加载JS、页面元素渲染等的时间

Profiles:用于做性能优化的,包括查看CPU执行时间与内存占用

Resources:用于查看保存再本地的一些信息,比如cookie等

Audits:一般用于优化前端页面、加速网页加载速度

Console:Javascript控制台,这个面板可以查看错误信息、打印调试信息(console.log())、写一些测试脚本,还可以当作Javascript API查看用。

 

Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。
下面整理一下如何使用Chrome进行调试。

怎样打开Chrome的开发者工具?

直接在页面上点击右键,然后选择审查元素:
20141222160739

或者在Chrome的工具中找到:
20141222161026
或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12
打开的开发者工具就长下面的样子:

20141222161221

不过我一般习惯与点右上角的那个按钮,将开发者工具弹出作为一个独立的窗口
20141222160612

Elements标签页

Elements标签页的左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性。
20141212153306

  1. Edit as HTML直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。
  2. Copy可以将HTML代码直接复制下来,在拷贝别人网站上面的HTML代码的时候灰常方便,你懂的~~
  3. Delete node删掉一个HTML Node
  4. Break on可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
20141212164759

  1. Style看HTML元素的样式
  2. Computed可以看元素的盒子模型
  3. Properties看到元素具有的方法与属性,比查API手册要方便得多

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。

20141212173210
点击左侧某一个具体请求URL,可以看到该请求的详细HTTP请求情况:
20141212180752
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

  1. Headers请求头信息和响应头信息
  2. Preview预览结果,如果是文件可以查看这个文件;如果是图片可以预览这个图片;如果是从服务器返回来的JSON数据,可以查看格式话后的JSON
  3. Response从服务器返回的响应结果
  4. Cookies请求和响应的Cookie
  5. Timing具体的响应时间

20141222143902
20141222143929

Resources标签页

Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
20141222151153
20141222152514

Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况,这个Timeline指的JS执行时间、页面元素渲染时间(每个信息都怎么看,我没弄懂..)
20141222153738

Profiles标签页

主要是做性能优化的,包括查看CPU执行时间与内存占用(这个也没弄懂)
20141222154345
20141222154353

Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)
20141222154620
点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了
20141222154931

Console标签页

就是Javascript控制台了:
20141222155456
在这个面板可以查看错误信息、打印调试信息(console.log())、写一些测试脚本,还可以当作Javascript API查看用。
20141222160218

移动端开发调试

现在新版chrome弹出控制台后如下图,其中的工具对移动端调试非常方便。
20141222170954
在控制台中可以直接模拟手机、调整UA、修改网络连接状态
20141222172041

说明

官方帮助手册(需要专用网络)

  1. 编辑样式和DOM
  2. javascript 调试
  3. 移动端调试
赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 关于Chrome浏览器的调试介绍

评论 3

评论前必须登录!

 

  1. #0

    哈哈我也没发现竟然发现我的了太帅没办法[挖鼻屎]

    森林之家5年前 (2016-03-31)
  2. #0

    我们网站的博客导航已添加贵站,欢迎去看看!

    themebetter5年前 (2016-03-19)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏