HBuilderX 1.2开始包含了H5平台支持。
使用方式
- 打开uni-app项目下的vue文件
- 点击菜单 运行->运行到浏览器->Chrome
[attach]26917[/attach] - 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可)
[attach]26920[/attach] - HBuilderX修改代码后会自动刷新chrome的页面
- 审查元素
[attach]27188[/attach]
在chrome控制台安装vue devtools后可查看节点关系。
安装方式自行搜索。
每个页面都在page节点下,pageHead是微信和app下的原生导航栏,即pages.json里配的导航栏。
pageBody是导航栏下的页面内容。
所有标签为了避免和标准H5标签冲突,都加了U前缀。 - 断点debug
点chrome控制台的source,可以给js打断点调试。
找到同名的文件,如果没有同名vue文件,一般会有一个同文件名的js文件,此时会提示检测到sourcemap,是否引入,点允许。然后就会有同名的vue文件。如果找不到,则把焦点放到source的代码区,然后敲ctrl+p打开文件查找窗口,然后敲入vue页面名字,然后打开vue页面。
这个vue里,只有js,没有tag和css,但可以打断点调试。
[attach]27190[/attach]
[attach]27191[/attach]
[attach]27192[/attach]
[attach]27189[/att