Chrome代码调试指南
时间:2022-07-23
本文章向大家介绍Chrome代码调试指南,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
打开开发者工具
- 在Chrome菜单选择:更多工具->开发者工具
- 在页面原色上右键单击,选择检查
- 快捷键
- 打开最近关闭状态
cmd+opt+i
或ctrl+shift+i
- 快速查看DOM或样式
Command+Option+c
或Control+shift+c
- 快速进入Console查看log运行JavaScript
Command+Option+j
或Control+shift+j
- F12打开
- 打开最近关闭状态
使用Elements调试DOM
查看与选择DOM节点
- 将鼠标移动到需要被查看的元素
- 右键选择检查
通过开发者工具左上角的小箭头可以选择需要查看的元素
通过如上图所示按钮,也可以定义调试工具所处位置。
实时编辑HTML和DOM节点
在调试工具处,双击 dom 节点即可进入编辑。
也可以通过右键节点选择编辑 HTML 模式。
在 Console 中访问节点
- 通过 document.querySelectAll 访问
- 通过 $0 快速访问选中元素
- 拷贝 ->js path
复制出的路径是通过 querySelector
接口选择的元素
给 DOM 中断点调试
- 在属性修改时打断点
- 节点删除时打断点
- 子树修改时打断点
通过对需要调试元素右键选择 break on
即可选择调试方式。
调试样式及 CSS
查看与编辑 css
在调试工具右侧即可看到样式
通过 filter 也可以过滤(搜索)某个属性
点击空白处也可以新增属性;点击前边的勾也可以使此属性失效。
在元素中增加类与伪类
- 通过点击 hov 按钮,可以选择伪类。例如点击
:hover
表示模拟鼠标悬停。
- 点击 cls 按钮,可以为元素添加一个类
- 点击加号,表示可以新建一个类
快速调试 CSS 数值及颜色图形动画
当鼠标悬停到...
图标时可以看到如下
点击即可展开可视化界面。
通过选择 more tools -> Animations
即可调出动画窗口。
当触发动画时就会自动录制,并且可以通过下方的属性可视化调试。
使用 Console 调试 Javascript
Console 交互式命令
在 Console 处可以写任意 JavaScript 代码。
在 Console 中调试 log 消息
- 普通信息
console.log('普通信息')
- warn 告警信息
console.warn('告警信息')
- 错误信息
console.error('错误信息')
- 展示 json 格式的复杂信息
var t = [
{name:'666',age:'17',sex:'男'},
{name:'666',age:'17',sex:'男'},
{name:'666',age:'17',sex:'男'}
]
console.table(t)
- 信息组展示
var label = '一组信息'
console.group(label)
console.info('Log')
console.info('warn')
console.info('error')
console.groupEnd(label)
- 定制样式
var styles = 'color:red;background:black;font-size:20px;'
console.log("%c样式展示",styles)
- 网络请求错误展示 当请求资源不存在或其他信息时打印的日志。
- 断言
console.assert(false,'断言失败')
- 查看代码执行时间
console.time()
var l = 1
console.timeEnd()
- 清除打印日志
console.clear()
调试 JavaScript 的基本流程
- 在代码中写入
debugger
- 断点调试
可以通过图中表示的几个按钮进行调试。按钮从左向右依次表示
- 恢复代码执行
- 跳过下一个函数执行
- 进入下一个函数执行
- 跳出函数
- 单步执行
也可以通过下方事件进行监听。
Sources 面板
- 调出面板
左侧为全局的静态资源,选择一个文件也可以对源文件进行编辑。
- 按住
ctrl+p
可以全局搜索某个资源
- 按住
ctrl+shift+p
可以输入一些命令
使用 Snippets 来复制 Debugging
简单来说就是为当前页面新加一个代码片段。
- 打开 Snippets 面板
- 编写需要添加的代码片段
- 执行代码片段
- 即可看到 console 里边输出了
test
使用 DevTools 作为 Text IDE
- 通过
Sources->Filesystem
唤起面板
- 添加文件夹 添加文件夹需要允许浏览器获取权限
- 注意 在此修改的内容等同于直接修改文件。
调试网络
Network 面板
使用 Network 详细分析请求
- filter 过滤只能过滤出下方已经展示的请求包含的地址。而无法过滤内容。
- 搜索 可以搜索到返回数据内容
- Preserver log 可以在跳转时保留网络请求日志
- Disable cache 不使用缓存
使用 Network Waterfall 分析页面载入性能
客户端存储 Application 面板
查看与调试 Cookie
通过上方的 filter 可以进行过滤,同样的也可以删除或新增 Cookie。
查看 LocalStorage 与 SessionStorage
与 Cookie 类似。
移动端 H5 页面调试
模拟移动端设备
使用 Chrome DevTools 进行 H5 页面开发
- 通过使用
show sensors
命令呼出 Sensors 面板进行调试
在 Edge 中为传感器。
- 网络菜单
在 chrome 为 network
在 Chrome DevTools 中集成 React 和 Vue 插件
集成 React 插件
由于国内无法使用 Google 商店,因此建议使用 Edge 商店。
安装此插件后,如果网页是由 react 开发的,那么开发者工具会多出一个 react 的选项,并且插件图标是点亮的。
集成 VUE 插件
与 React 插件类似。
- Java构造方法与析构方法实例剖析
- 5.训练模型之利用训练的模型识别物体
- KMP算法学习(详解)
- 查找算法的实现(C/C++实现)
- HDU 1495 非常可乐(数论,BFS)
- Selenium2+python自动化74-jquery定位
- 用php实现简单的自制计算器
- Selenium2+python自动化75-Chrome配置加载
- Selenium2+python自动化75-非input文件上传(SendKeys)
- python接口自动化11-post传data参数案例
- POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
- python接口自动化12-案例分析(csrfToken)
- Python基础学习笔记
- POJ 3278 Catch That Cow(BFS,板子题)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PAT (Basic Level) Practice (中文)1032 挖掘机技术哪家强 (20 分)
- PAT (Advanced Level) Practice 1023 Have Fun with Numbers (20 分)
- PAT (Basic Level) Practice (中文)1034 有理数四则运算 (20 分)
- 移动端开发的几点建议
- 数据结构题集(严书)图 常见习题代码
- PAT (Basic Level) Practice (中文)1036 跟奥巴马一起编程 (15 分)
- PAT (Advanced Level) Practice 1024 Palindromic Number (25 分)
- Flink 连接 hive 解决 java.net.UnknownHostException
- PAT (Advanced Level) Practice 1147 Heaps (30 分)
- Java自动化测试(app自动化环境搭建 31)
- PAT (Basic Level) Practice (中文)1038 统计同成绩学生 (20 分)
- 数据结构题集(严书)串 常见习题代码
- PAT (Basic Level) Practice (中文)1040 有几个PAT (25 分)
- 201909-4ccf计算机职业资格认证考试 第四题 推荐系统
- 【Linux_Shell 脚本编程学习笔记四、监控系统内存并报警企业案例脚本】