chrome移动端调试cios

文章目录

• 前言
• 1. 打开Dev Tool (开发者工具)🔥
• 2.Dev Tool 简单使用🔥

• 2.1 快捷键
• 2.2 禁用/开启页面 JavaScript
• 2.3 隐藏`html`中的注释
• 2.4 切换主题颜色
• 2.5 截图screenshot

• 2.5.1 节点屏幕截图
• 2.5.2 截取区域屏幕截图
• 2.5.3 截取完整尺寸的屏幕截图
• 2.5.4 截取屏幕截图

• 2.6 开发者工具停靠位置

• 3.css调试🔥

• 3.1 节点检查
• 3.2 查询DOM树
• 3.3 编辑样式

• 3.3.1 用auto-complete特性给元素添加样式
• 3.3.2 让：hover常驻
• 3.3.3 编辑class
• 3.3.4 复制样式
• 3.3.5 样式
• 3.3.6 计算属性
• 3.3.7 布局
• 3.3.8 事件
• 3.3.9 DOM属性

• 4.控制台 🔥

• 4.1 快捷键（打开控制台）
• 4.2 介绍
• 4.3 执行语句

• 5.源代码 🔥

• 5.1 断点调试
• 5.2 监视变量

• 6.网络 🔥
• 7.存储 🔥
• 总结

---

前言

俗话说：工欲善其事，必先利其器，而作为前端开发工作的我们，必然首要了解自己的 器。谷歌作为最广泛的浏览器，了解及精通谷歌开发工具是可能极大提高开发速度的。

---

1. 打开Dev Tool (开发者工具)🔥

菜单>更多工具>开发者工具
快捷键：F12 右击点击：检查

2.Dev Tool 简单使用🔥

2.1 快捷键

WIN : ctrl + shift+pMAC: command+shift+p

2.2 禁用/开启页面 JavaScript

• 启用



• 禁用

2.3 隐藏html中的注释

• 隐藏



• 显示

2.4 切换主题颜色

• 切换为深色主题

• 切换为浅色主题

2.5 截图screenshot

2.5.1 节点屏幕截图

a. 选择节点

b. 截图方式

c. 结果

2.5.2 截取区域屏幕截图

a. 截图方式

b. 内容

c. 结果

2.5.3 截取完整尺寸的屏幕截图

a. 截图方式

b. 内容

c. 结果

2.5.4 截取屏幕截图

a. 截图方式

b. 内容

c. 结果

2.6 开发者工具停靠位置

3.css调试🔥

3.1 节点检查

a. 打开开发者工具

b. 自动定位到DOM元素位置

- **根据DOM元素显示对应页面内容**

- 根据页面内容自动查找对应DOM元素

c. 查看DOM元素的内外边距

d. 移动端调试

3.2 查询DOM树

• 快捷键

win: ctrl + fmac: command + f

• 查询方式：
• Console

• inspect(document.querySelector(选择器)）
  

3.3 编辑样式

3.3.1 用auto-complete特性给元素添加样式

3.3.2 让：hover常驻

3.3.3 编辑class

3.3.4 复制样式

3.3.5 样式

3.3.6 计算属性

3.3.7 布局

3.3.8 事件

3.3.9 DOM属性

4.控制台 🔥

4.1 快捷键（打开控制台）

• Ctrl+Shift +J
• Command+Option+J(MAC)

4.2 介绍

4.3 执行语句

• $_返回上一条语句的执行结果
• $0上一个选择的DOM节点($1,$2…)**
• Log级别筛选



• console的用法

console.log('技术放肆聊')    // 输出普通信息
  console.info('技术放肆聊')    // 输出提示信息
  console.warn('技术放肆聊')   // 输出警告信息
  console.error('技术放肆聊')  // 输出错误信息
  console.debug('技术放肆聊')  // 输出调试信息
  console.dir()  //可以显示一个对象所有的属性和方法
  console.dirxml()  //用来显示网页的某个节点(node)所包含的html/xml代码
  console.assert()  //用来判断一个表达式或变量是否为真，
  console.time()和console.timeEnd() // 用来显示代码的运行时间
  console.profile()和console.proileEnd()  //用来分析程序各个部分的运行时间，找出瓶颈所在。
  console.count()  //统计代码被执行的次数
  console.table()  //表格显示方法

5.源代码 🔥

5.1 断点调试

• 浏览器打断点



• debugger调试

在源码中通过代码debugger调试

• 条件中断代码执行

5.2 监视变量

6.网络 🔥

7.存储 🔥

---

总结

在此分享给大家一首我非常喜欢的诗吧！
　　　　《自嘲》
本是后山人，偶做前堂客。
醉舞经阁半卷书，坐井说天阔！
大志戏功名，海斗量福祸。
论到囊中羞涩时，怒指乾坤错！

承蒙大家喜欢，够我欢喜好多年！
愿与君共勉之！