这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前端开发调试
一、PC端调试——Chrome DevTools
动态修改元素和样式
- 点击 .cls开始动态修改元素的clss
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值 (字号、颜色、宽度高度等) 可以进行编辑,浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles 面板中的 CSS 规则
- 强行激活伪类的两种方式:
- 选中具有伪类的元素,点击 :hov
- DOM 树右键菜单,选择 Forces State
Console(控制台)
控制台是用来打印日志和输入命令行的。其中 console 命令有:
- console.log() 是用来打印语句的
- console.warn() 是用来打印警告的
- console.error() 是用来打印错误的
- console.info()
- console.debug()
- console.table() 是具象化的展示 JSON 和数组数据
- console.dir() 通过类似文件树的方式展示对象的属性
还有一些占位符是给日志添加样式的,可以突出重要的信息,比如:%s 是字符串占位符、%o 是对象占位符、%d 是数字占位符。其中字符串的输出和数字的输出的颜色是不一样的,这有便于我们的分辨。
通过日志的输出,可以让我们轻易地找到日志输出的地方,从而对其进行修正或者处理。
Sorce Tab(资源栏)
- 区域一:页面资源文件树
- 区域二:代码预览区域
- 区域三:Debug 工具栏
- 监视(Watch):可以查看某个变量是什么值
- 断点(Breakpoints):可以查看所有断点设置在什么位置,并且通过勾选的方式来确定是否取消该断点
在代码的预览当中,是可以将鼠标移动到某个值上,那么就会显示出该值的是什么类型。
在 Debug 工具栏中是由断点调试功能的,在代码中输入debugger;
就能设置断点,在运行的时候,就会在断点中暂停代码的运行,以便于我们检查断点前的代码的正确性。
压缩后的代码怎么调试?
出于安全考虑,上线之前 JavaScript 代码通常会被压缩,压缩前端代码天生具有“开源”属性,后的代码只有一行,变量使用“a、b等替换,整体变得不可阅读。为此,可以使用 Source Map 来进行调试。
移动端H5调试
真机调试
IOS端
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器 (设置 -> Safari ->高级 -> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试 (菜单栏一>开发-> iPhone 设备名 ->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
注:没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的 ios模拟器
安卓端
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式,勾选 USB 调试,并允许 调试
- 电脑打开 Chrome 浏览器,在地址栏输入:chrome://inspect/#devices 并勾选Discover USB devices 选项
- 手机允许远程调试,并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面