Open zhangzheng-zz opened 3 years ago
有时候,我们需要调试嵌入到安卓app的H5项目,一般这样的H5项目只有一个线上的链接,在浏览器上无法模拟出安卓的环境,加上移动app端也没有浏览器的开发者工具,这就给H5页面调试造成了不便,这里介绍一种利用chrome浏览器进行远程真机调试的方法:_
app
H5
chrome
More tools
Inspect devices
pc
Inspect
帮助开发者在移动端进行调试,本插件是在 vConsole 的基础上封装的 webpack 插件,通过 webpack 配置即可自动添加 vConsole 调试功能,方便实用。 vconsole-webpack-plugin
{ "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 }
launch.json配置:
{ "type": "node", "request": "launch", "name": "node 调试", "skipFiles": [ "<node_internals>/**" ], // node 项目入口文件路径 "program": "${workspaceFolder}\\test.js" }
以 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}/*" } }
chrome 远程真机调试 H5 页面
有时候,我们需要调试嵌入到安卓
app
的H5
项目,一般这样的H5
项目只有一个线上的链接,在浏览器上无法模拟出安卓的环境,加上移动app
端也没有浏览器的开发者工具,这就给H5
页面调试造成了不便,这里介绍一种利用chrome
浏览器进行远程真机调试的方法:_chrome
浏览器按下F12打开开发者工具选择更多工具(More tools
)->检查设备(Inspect devices
)(或者直接打开链接:chrome://inspect/#devices)app
/H5
页面,在pc
端的chrome
浏览器上显示出Inspect
按钮,点击Inspect
打开网页,此时pc
端网页与真机同步了,可以利用chrome
浏览器的开发者工具对H5
页面进行调试。vConsole 调试
帮助开发者在移动端进行调试,本插件是在 vConsole 的基础上封装的 webpack 插件,通过 webpack 配置即可自动添加 vConsole 调试功能,方便实用。 vconsole-webpack-plugin
vscode断点调试技巧
chrome 浏览器加 vscode 断点调试
vscode 断点调试 node 项目
launch.json配置:
vscode 调试 Vue 项目
以 vue-cli 脚手架为例,开发环境开启源码映射