H5移动端及浏览器调试方法

[zhangzheng-zz]

chrome 远程真机调试 H5 页面

有时候，我们需要调试嵌入到安卓app的H5项目，一般这样的H5项目只有一个线上的链接，在浏览器上无法模拟出安卓的环境，加上移动app端也没有浏览器的开发者工具，这就给H5页面调试造成了不便，这里介绍一种利用chrome浏览器进行远程真机调试的方法：_

• 1、打开chrome浏览器按下F12打开开发者工具选择更多工具(More tools)->检查设备(Inspect devices)（或者直接打开链接：chrome://inspect/#devices）
• 2、安卓手机通过USB连接电脑，需要在手机端打开传输文件和开启调试者模式
• 3、手机打开app/H5页面，在pc端的chrome浏览器上显示出Inspect按钮，点击Inspect打开网页，此时pc端网页与真机同步了，可以利用chrome浏览器的开发者工具对H5页面进行调试。

  vConsole 调试

  帮助开发者在移动端进行调试，本插件是在 vConsole 的基础上封装的 webpack 插件，通过 webpack 配置即可自动添加 vConsole 调试功能，方便实用。 vconsole-webpack-plugin

  vscode断点调试技巧

  chrome 浏览器加 vscode 断点调试

• vscode 安装插件 Debugger for Chrome
• vscode 运行调试生成配置文件 .vscode/launch.json
• 配置浏览器断点调试：

  {
          "name": "使用本机 Chrome 调试",
          "type": "chrome",
          "request": "launch",
          "file": "${workspaceRoot}/index.html",
          //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false 
          "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // Chrome 安装路径
          "sourceMaps": true,
          "webRoot": "${workspaceRoot}",
          "port":5433
      }

  

vscode 断点调试 node 项目

launch.json配置：

{
            "type": "node",
            "request": "launch",
            "name": "node 调试",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // node 项目入口文件路径
            "program": "${workspaceFolder}\\test.js"
 }

vscode 调试 Vue 项目

以 vue-cli 脚手架为例，开发环境开启源码映射

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

{
            "type": "chrome",
            "request": "launch",
            "name": "vuejs 调试",
            // 项目启动地址
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
 }