# 使用h5debug

bucky命令行除了可以使用debug命令在控制台下对XARPackage进行全本地调试，也提供了h5debug命令支持在浏览器里进行全本地调试。

## 准备必要的环境

全本地调试要求本地安装使用到的数据库，目前有下面三种。
- MySQL，并设置用户名root，密码：123456
- MongoDB
- Redis（暂不开放）

安装好使用到的上述数据库，并启动。

## 启动h5debug

在命令行下启动h5debug服务，在调试期间需要一直开着：
```
bucky h5debug
```

## 切换h5_core.js到h5_ld_core.js

例如，打开minichart项目，编辑src/client/index.html，切换h5_core.js到h5_ld_core.js，编辑并保存：

![](images/h5-ld-core.jpg)

## 使用Chrome浏览器开发者工具查看

首先，打开src/client/index.html：

![](images/h5-ld-empty.jpg)

其次，打开chrome的开发者工具，可以看到源代码里包含两部分：
- 对应到src/client目录的html前端代码
- 本地加载的XARPackage的模块代码，在目录`127.0.0.1:8089`下的`services/repository/...`，该目录下会显示加载了的XARPackage里的模块（module），此处已经加载了`src/server/minichat/minichat.js`这个模块代码。

![](images/h5-ld-dev.jpg)

## 设置断点

然后，我们在minichat.js里的`_getMongoDB`函数下设置一个断点：

![](images/h5-ld-debug.jpg)

最后，输入聊天内容，点击发送，可以看到代码在断点的位置停下来了：

![](images/h5-ld-break.jpg)

通过全本地调试，可以快速的发现和解决问题，Enjoy Code!

**注意**： 如果修改了konwledges.json，需要重新发布knowledges：
```
bucky k -reset
```

以及重启h5debug:
```
bucky h5debug
```