编辑调试代码

通过pbtoweb转换后的代码，可以在代码编辑器中修改，推荐使用VSCode编辑。通过浏览器开发者工具可以进行断点调试。

下面对如何修改代码进行说明。

安装VSCode

1. 下载VSCode，并安装。下载地址 (opens new window)

2. 打开VSCode, 并添加插件

• 添加js插件

JavaScript Debugger(Nightly)

JavaScript(ES6) code snippets

• 添加通义灵码插件（非常有用）

Lingma - Alibaba Cloud AI Coding Assistant

通义灵码插件能够帮助你快速生成代码，会自动提示，并给出代码示例。有不会的问题也可以提问。

导入代码

在VSCode中选择 File -> Open Folder -> D:/server/public/webtest, 如下：

文件说明

common 目录中是一些框架文件。

包括： 运行库文件pbvm.js，实现了PB的基础控件和运行库函数等，以源码形式提供，可以自行查看。

H5DW文件satreport.js

以及一些公用的JS文件。这个目录中的文件不建议修改。

image 目录如果有图片，会放在该目录

page 目录是主要代码文件，转换PB代码的文件都会放在这里

编辑代码

下面我们以编辑主窗口代码为例，演示如何编辑代码。

转换后的代码文件在page目录下，文件名对应原来的PB对象名称，文件夹和原来pbl对象名对应。

可以在左边中查找，双击打开w_main.js文件，也可以通过Ctrl+P搜索文件并打开。如下：

其中事件、方法、属性、变量等，都对应了PB对象中的同名事件、方法、属性、变量。

主窗口对应的部份JS事件如下：

PB事件	JS事件
open	onOpen
close	onClose
resize	onResize
timer	onTimer

按钮事件:

  async cb_1_clicked() {
    await this.dw_1.retrieve();
  }

我们修改按钮cb_1的clicked事件，增加数据窗口过滤代码, 并保存。

修改后按钮事件代码：

  async cb_1_clicked() {
    await this.dw_1.retrieve();
    this.dw_1.setfilter('id > 1')
    this.dw_1.filter()
  }

刷新浏览器，点击按钮，可以看到代码生效。如果未生效，可以在浏览器菜单中找到删除浏览数据清除浏览器缓存，然后刷新。

调试代码

通过浏览器的开发者工具可以调试代码。

以Chrome为例，在浏览器中切换到要调试的页面，按快捷键shift+command+i打开开发者工具，切换到源代码/来源

断点调试

找到要调试的代码，点击行号可以设置断点，点击页面的查询按钮，可以看到代码在断点处暂停。

用鼠标移动到代码，可以看到变量的值。

通过点击开发者工具右上角的工具栏图标，可以进行单步调试，也可以看到 变量、函数、堆栈等信息。

网络

开发者切换网络选项，可以查看网络请求，比如点击检索按钮后的请求，如下： 其中载荷可以看到请求的参数，响应可以看到返回的数据。

控制台

在控制台中可以页面的用户输出和错误信息。

我们修改代码如下：

async cb_1_clicked() {
    await this.dw_1.retrieve();
    console.log(this.dw_1.data);
    //调用一个没有的函数
    this.dw_1.setNO();
  }

点击按钮后，控制台中显示信息如下： 可以看到输出的数据窗口数据和报错信息。点击错误信息，可以跳转到对应的代码行。

AI写代码

我们如果想修改这个JS文件代码，可以通过AI来完成。我们以添加一个按钮，并添加一个点击事件为例，看看AI如何帮助我们完成这个任务。

1. 点击VScode右边面板的通义灵码的图标,切换到通义灵码界面

2. 然后在输入框输入参考这个文件的内容，增加一个新的按钮，位置在“嵌入式sql” 按钮的后面，并且有点击事件,按回车

AI开始分析文件内容，并给出修改后的代码。

点击接受完成修改。

3. 在浏览器中刷新查看效果，发现新增了一个按钮，并且点击可以执行事件。

效果如图：