这是我参与「第五届青训营 」伴学笔记创作活动的第 20 天
Nodejs 调试
nodejs的调试同样可以使用断点进行调试，
首先将应用运行起来：
- 执行命令node --inspect=8888 index.js
- chrome 浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板 (在chrome://inspect/#devices 中配置network target）
- 在 node 试面板中使用断点调试：
也可以使用 Inspector Protocol + VS code：
- VS Code 点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
线上即时修改 Overrides
可以根据以下步骤修改：
- 打开 Sources 面板下的的Overrides
- 点击 Select folders forOverrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command +s 保存
- 打开 devTools，点击右上角的个小点-> More tools ->Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地 source map
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 SourceMap 文件。
使用代理工具 Mock 数据
- 右键选中要 mock 数据的接口选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
移动端H5调试
ios的真机调试
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器 (设置-> Safari -> 高级-> 开启 Web 检查器)。
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试 (菜单栏 一开发> iPhone 设备名-> 选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
Android真机调试
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
使用代理调试
原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例：
- 安装 Charles
- 查看电脑 P 和端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权
- 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
