Chrome调试工具的使用【详细】

Chrome 调试工具入门

一、基本介绍

1、打开dev tool

方式1：菜单-》更多工具-》开发者工具

方式2：快捷键F12

2、打开命令菜单

方式：快捷键 ctrl+shift+P

使用举例：

1）截屏：screen shot

2）修改主题颜色为日间模式：light theme

3）修改窗口位置靠右：dock to left

4）…

3、五个常用的Tab

1）Element

2）Console

3）Source

4）NetWork

5）Application

二、CSS调试（Element）

1、检查元素

方式1：右击页面元素-》检查我

方式2：打开dev tool-》鼠标移动到待检查元素

如何切换到移动设备？

方式：点击移动设备小图标

2、查询DOM树中某一个DOM节点

使用 快捷键ctrl+F

方式1：文本查询

例如：输入section_one，输入对应节点

方式2：CSS选择器

例如：输入section#section_two（查找id为section_two的section节点元素）

方式3：Xpath

例如：输入//section/p（在全局范围内查找section里面的p节点）

方式4：使用console的inspect方法

例如：查找id为section_seven的节点

按下回车后，跳转到Element的DOM树中

三、编辑样式（Element）

1、编辑节点样式

2、复制样式

1）找到想要复制的元素——》右键检查元素——》右击选中元素，点击copy，copy styles

2）选择自己想要应用该样式的元素，在element.style中复制改样式

四、控制台console

1、打开方式：快捷键 ctrl+shift+I

2、控制台的基本使用

1）定义变量，并查看

2）弹出警示框

3）console.log(xxx)，打印内容

4）$_， 返回上一条语句的执行结果

5）$+数字，返回之前选中的某个节点

$0 返回上一个选中的节点

$1 返回上上一个选中的节点

以此类推

6）console相关的语句

1. console.log() 普通信息

2. console.error() 错误信息

3. console.warn() 警告信息

4. console.clear() 清空控制台
   

5. console.group() 批量处理一组console语句
   

6. console.time() 判断一段代码的执行时间
   

7. console.table() 将一个数组以表格形式呈现出来
   

其他：assert,trace

3、JavaScript调试

方式1：在代码中加上debugger语句，程序执行到该位置后会暂停，不断点击下一步即可查看变量值的变化。

方式2：在dev tools中点击要打断点的行号，刷新页面，单步执行

五、网络Network

1、基本介绍

Name：请求的资源名称

Status：状态码

Type：请求的资源类型

Initiator：请求发起者

Size：资源的大小

Time：请求资源的实践

Waterfall：瀑布流，详细信息如下：

2、筛选不同类型的资源

3、保留历史请求：勾选Perserve log

当页面出现跳转/刷新后，之前的请求依然可以保留

4、清除浏览器缓存：勾选Disable cache

5、模拟用户网络状态：节流器

6、传输详细信息

内容：发起的请求个数，数据量、完成时间、加载时间等

六、客户端Application

1、local Storage和Session Storage对比：

local Storage：会一直存储在本地浏览器，直到人为清除它。

Session Storage：在会话结束、页面关闭后，就会自动清除。

2、localStorage相关方法

1）setItem方法：设置localStorage

2）getItem方法：获取localStorage的值

3）clear方法：清除某个localStorage的值

3、cookies

1）设置cookie

2）设置cookie过期时间

方法1： cookie.setMaxAge(0);//不记录cookie

方法2：cookie.setMaxAge(-1);//会话级cookie，关闭浏览器失效

方法3：cookie.setMaxAge(60*60); //过期时间为1小时