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小时