DCloud_heavensoft
DCloud_heavensoft
  • 发布:2015-12-22 06:07
  • 更新:2022-03-11 15:55
  • 阅读:122410

调试方式介绍一 边改边看

分类:HBuilder

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。
系列文章目录导航:

边改边看

边改边看是轻量级的界面调试工具,最方便最常用。
在HBuilder右上角切换开发模式,可以选边改边看方式,切换模式的快捷键是Ctrl+p。
进入边改边看后,左边显示代码,右边显示浏览器。
HBuilder的windows版,右边的浏览器是chrome;在mac版,右边的浏览器是Safari。
截止到HBuilder7.6的内嵌chrome版本是35,ua是:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36

1. 左边写代码,保存后右边自动刷新

在左边写代码,保存时右边会自动刷新页面,非常方便调界面。
对于less、sass等预编译语言,在ctrl+s后自动输出css后,也会继续激活浏览器的刷新。
HBuilder对markdown的支持也很好,本身编辑器就有高亮和着色功能,同时边改边看里也可以预览HTML效果。

2. 代码和浏览器元素互跳转

windows版的边改边看还支持代码和页面元素的互相跳转。
对代码里的一个div点右键,选“高亮浏览器内对应元素”,就会看到右侧浏览器里指定的元素高亮了。

反之,对浏览器某个元素点右键,也会有“查找文档中对应元素”的选项,点击后会跳转到相应代码段落。

3. 控制台

边改边看有2个控制台,默认控制台显示在HBuilder下方,直接输出了log和错误日志。
控制台显示了代码行号,点击后可直接转到该行代码。

另一个控制台,是chrome控制台。
在HBuilder windows版的边改边看里点右键,可以选择启动chrome控制台。
(mac版HBuilder的边改边看是Safari浏览器,暂时调不出控制台)

chrome控制台的功能非常多,检查css覆盖、调试js、查看网页加载性能...这里不详细介绍,请自行谷百。
但有一个功能要强调下,就是手机设置。
在控制台里选Emulation的device,可以看到iphone、nexus等很多手机。
如果你需要开发触屏版网页,需要使用touch功能,就一定要选择成手机开发模式。默认的pc模式是不支持touch事件的。
不过要注意,虽然这里的浏览器控制台可以选手机,但只是模拟手机浏览器,plus扩展的原生api是无法调用和调试的。

php等服务器语言也支持边改边看,在设置里搜索web服务器,添加外部web服务器,配好地址也可以边改边看。
至于php本身语言的调试,可以通过php插件做来,本文不详述。

5 关注 分享
jojoku 雪之梦技术驿站 久依 husheng KLSUN

要回复文章请先登录注册

7***@qq.com

7***@qq.com

回复 4***@qq.com :
你是用了vscode的快捷键?
2022-03-11 15:55
4***@qq.com

4***@qq.com

win10 HBuilderX 找不到这个功能,ctrl P是搜索文件的功能
2021-06-21 16:37
秋Cool

秋Cool

我用的HX,我也打开了“保存自动刷新浏览器”,但有时候这个功能会失效——保存后右边的内置浏览器任然不刷新,很困扰(=′ー`)
2021-03-17 11:44
寻水鱼

寻水鱼

mac系统HbuilderX怎么打开边改边看模式呢
2020-11-17 15:28
你愁啥

你愁啥

回复 a***@qq.com :
双击
2019-12-20 17:19
背着电脑走江湖

背着电脑走江湖

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群260548659一起讨论交流学习,爬坑,共同进步。
2019-12-16 09:54
hhyang

hhyang

我只想说这是挖坟大队?几百年的贴了
2019-03-16 14:51
1231312312312

1231312312312

android原声代码混合开发时怎么调试?
2019-03-16 14:34
9***@qq.com

9***@qq.com

回复 DCloud_heavensoft :
最新版HBuilderX一保存chrome就刷新,功能关不掉,对号勾选去掉不起作用
2019-01-17 17:41
工藤驼一

工藤驼一

回复 DCloud_heavensoft :
昨天问完就用了微信开发工具和真机调试了,谢谢哈
2018-09-04 09:52