调试方式介绍一 边改边看

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

• [调试方式介绍一 边改边看]
• 调试方式介绍二 真机运行
• 调试方式介绍三 webkit remote debug之Chrome调试Android手机
• 调试方式介绍四 webkit remote debug之Safari调试iOS手机

边改边看

边改边看是轻量级的界面调试工具，最方便最常用。
在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插件做来，本文不详述。