前端开发调试工具记录

Posted 2021-03-16 zyk-cn

前端开发调试工具记录

开发工具

vs Code与Web Storm

docker（docker compose；docker hub）

nvm（nodejs版本管理）

调试工具

• Chrome + android /Safari + ios（界面类）

  1. Safari偏好设置-高级-显示开发菜单=》增加开发者选项=》打开网页检视器
  2. 手机设置，safari设置，高级，打开Web检查器=》开发可以看到手机设备

  3. 手机通过ip访问网页，开发内通过点选指定窗口即可调出调试窗口。

  4. Chrome输入：chrome://inspect/#devices
  5. Android打开开发者模式，打开保持唤醒，usb调试=》Chrome下可以看到设备与界面
  6. 通过ip访问网址，chrome下选择指定页面的inspect选项即可

  7. 如果白屏=》a.更新手机与电脑chrome b.开启虚拟专有网络（需要google服务）

• Fiddler（win）/Charles（mac）（劫持类）

  1. 设置proxy（端口，http，socks）
  2. 手机在无线局域网设置代理即可

• Weinre /Spy-Debugger /vConsole（基于npm包的proxy服务）

  1. 跟着github官方项目走
  2. 通过npm安装依赖
  3. 启动服务（注意端口）
  4. 电脑通过浏览器打开localhost:端口，显示工具主界面
  5. 跟着浏览器的教程走，但由于是手机调试，有些用localhost的，应用电脑ip代替

接口测试（mock）

测试后台接口，提供mock数据。

浏览器插件pretty美化json。

• 插件类（Postman，DHC，REST client）
• 平台类（Yapi，DOClever，RAP2，Swagger）[自己非静态ip的话，访问困难]，但仍有解决方法。
• 终端类（Postman，SoapUI，DOClever）

mock工具（Yapi，DOClever，easymock，fastmock）

DOClever可以用官方docker镜像快速构建（管理总后台默认用户密码为：DOClever）。

mock工具的使用（DOClever为例）

在接口的Result部分可以设置值和mock规则。

1. 项目设置中mock选项
2. 下载net.js
3. 参考举例用nodejs运行net.js =》提示：内网测试，Mock正监听端口：***
4. 访问mock监听端口即可
5. 将接口状态改为开发完成，就会自动替换为设置的真实接口

代码实现mock（mockjs为例）

注意：官网，github文档

1. 安装（npm，直接引入）

2. 语法规范

   • 数据模板定义规范

     ‘属性名|生成规则‘: 值

   • 数据占位符定义规范

     @占位符

     @占位符(参数[, 参数])

     优先引用数据模板中的属性

     引用的是Mock.Random中的方法

     可以通过Mock.Random.extend()扩展

     支持绝对路径与相对路径

例子：

var sexType={'男','女'}

Mock.mock('localhost:8080', {
    'userList|1-10':[
        {
            'userID|+1':1,
            'username':'@cname',
            'age|18-28':0,
            'birthday':'@date("yyyy-MM-dd")',
            'city':'@city',
            'sex|1':'sexType'
        }
    ]
})