day06 - 前端必须知道的开发调试知识 |青训营笔记
这是我参与「第四届青训营 - 前端场」笔记创作活动的的第06篇笔记
01.Bug 与Debug
02.Chrome DevTools
02-1动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类
·选中具有伪类的元素，点击:hov
.DOM树右键菜单，选择Force State
02-2 Console
- console.log
- console.warn
- console.error
- console.debugconsole.info
- console.table 具像化的展示JSON和数组数据
console.dir
通过类似文件树的方式展示对象的属性
占位符
给日志添加样式，可以突出重要的信息 %s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字 占位符
02-3 Sorce Tab
02-4 NetWork
03.移动端.调试
03-1真机调试
ios
- 使用Lightning 数据线将iPhone与 Mac相连
- iPhone开启Web检查器（设置-> Safari->高级->开启Web检查器)
- 电脑打开Chrome浏览器，在地址栏输入:chrome:/
- Mac打开 Safari浏览器调试(菜单栏>开发-> iPhone设备名->选择调试页面)
- 在弹出的 Safari Developer Tools中调试
没有iPhone设备可以在Mac AppStore安装×code使用其内置的
Android
- 使用USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- iPhone使用 Safari浏览器打开要调试的页面/inspect/#tdevices并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
直接使用手机扫码查看，体验更佳
03-2VConsole
03-3使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑·手机上的请求都经过代理服务器
以 Charles为例:
- 安装Charles
- 查看电脑和端口
- 将IP、端口号填入手机 HTTP代理
- Charles 允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
04.NodejS 调试
05.常用开发调试技巧
05-1线上即时修改Overrides
- 打开Sources面板下的的Overrides
- 点击Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page中修改代码，修改完成后command +s 保存
- 打开devTools ,点击右上角的三个小点-> More tools ->Changes,就能看到所有修改了
