前端开发调试工具记录

Safari浏览器 2020-01-12

前端开发调试工具记录

开发工具

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'
        }
    ]
})

相关推荐