前端必须知道的开发调试知识（二）|青训营笔记

dreammaker
361 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第13天

移动端H5调试

真机调试

iOS

  1. 使用Lightning数据线将iPhone 与Mac相连

  2. iPhone开启Web检查器(设置-> Safari -> 高级->开启Web检查器);

  3. iPhone使用Safari浏览器J开要调试的页面

  4. Mac打开Safari浏览器调试(菜单栏->开发->iPhone设备名->选择调试页面)

  5. 在弹出的Safari Developer Tools 中调试

     没有iPone设备可以在Mac AppStore 安装Xcode 使用其内置的iOS模拟器

Android

  1. 使用USB数据线将手机与电脑相连

  2. 手机进入开发者模式，勾选USB调试，并允许调试

  3. 电脑打开Chrome浏览器，在地址柱输入: chrome://inspect/#devices 并勾选Discover USB devices选项

  4. 手机允许远程调试，并访问调试页面!

  5. 电脑点击inspect按钮

  6. 进入调试界面

     可以直接使用手机扫码

VConsole

  • 日志(Logs):

    console. log|info|error|. .

  • 网络(Network):

    XMLHttpRequest,Fetch, sendBeacon

  • 节点(Element):

    HTML节点树

  • 存储(Storage):

    Cookies, Local storage, SessionStorage

  • 手动执行JS命令行

  • 自定义插件

使用代理工具调试

原理:

  • 电脑作为代理服务器

  • 手机通过HTTP代理连接到电脑

  • 手机上的请求都经过代理服务器

      以Charles为例:
  1.安装Charles
  2.查看电脑IP和端口
  3.将IP、 端口号填入手机HTTP代理
  4. Charles允许授权
  5.使用SwitchHosts!软件给Mac电脑配Hosts
  6.手机访问开发环境页面

常用代理工具

  • Charles: 适合查看、控制网络请求，分析数据
  • Fiddler: 与Charles类似，适合windows平台
  • spy- debugger: 远程调试手机页面，抓包
  • Whistle: 基于Node实现的跨平台Web调试代理工具

NodejS调试

Inspector Protocol + Chrome Devtool

  1. 执行命令 nod--inspect=8888 index .js
  2. chrome浏览器访问服务
  3. 点击绿色node图标打开node调试面板(在chrome:/ / inspect/ #devices中配置network target )
  4. 在node调试面板中使用断点调试

Inspector Protocol + VS Code

  1. VS Code点击运行
  2. 添加配置
  3. 启动调试
  4. 添加断点
  5. 查看变量、堆栈

常用开发调试技巧

线上即时修改

  1. 打开Sources面板下的的C Dverrides
  2. 点击Select folders for Overrides。选择一个本地的空文件夹目录。
  3. 允许授权
  4. 在page中修改代码，修改完成后command + s保存
  5. 打开devTools,点击右上角的三个小点-> More tools -> Changes,就能看到所有修改了

利用代理解决开发阶段中的跨域问题

image.png

启用本地source map

线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件。

使用代理数据Mock工具

  1. 右键选中要mock数据的接口，选择save response, 保存文件到本地。
  2. 本地打J开保存的文件，编辑想mock 的数据并保存。
  3. 右键选中第一步的接口，选择Map Local, Local Path 选择第二步的文件。
avatar
文章
阅读
粉丝