Fx DevTools

Fx DevTools是vscode的插件，方便开发人员上传、新建、调试代码。

在vscode中安装Fx DevTools

1. 打开vscode IDE

2. 单击左侧活动栏的 扩展 项

3. 在搜索栏中输入“fx-devtools”进行搜索，搜索成功后进行安装

创建项目

打开vscode IDE，通过 Ctrl+Shift+P (Windows) 或者 Cmd+Shift+P (macOS) 打开vscode命令面板，输入 Fx: Create Project 命令并执行。然后按照步骤进行，即可创建一个本地项目

登录租户

1. 打开浏览器，进入纷享销客「后台管理」->「开发者证书」，新建开发者证书

2. 打开vscode IDE，通过 Ctrl+Shift+P (Windows) 或者 Cmd+Shift+P (macOS) 打开vscode命令面板，输入 Fx: Login devtool 命令并执行，命令执行成功后会自动打开 certification.json 文件

3. 将新建的证书复制粘贴到 certification.json 文件中的 certificate字段 并保存

4. 任意拉取插件/组件，如果拉取成功，即可验证登录成功

注意：「开发者证书」需要内部申请才可开通

上传/新建/更新自定义插件/组件

新建组件文件 会在当前文件夹下生成所填写的文件名称的模版文件（xxx.wxml,xxx.wxss,xxx.js,xxx.json）

调试代码

该功能可以帮助开发人员实时调试相关代码，提高开发效率。

调试代码（PC）

1. vscode打开项目（注意：需要打开创建项目的那个文件夹）

2. 点击底部状态栏最右边的 Fx Dev 按钮，启动本地服务器。启动成功后，按钮显示 Fx Dev Port: xxxx

3. 打开浏览器，进入纷享销客应用，url增加 ?debug=1 字符，使应用进入调试模式。

例如，某个页面的url为 https://www.fxiaoke.com/XV/UI/Home#paasapp/home/=/appId_CRM，我们将其修改为 https://crm.ceshi112.com/XV/UI/Home?debug=1#paasapp/home/=/appId_CRM 并刷新当前页即可进入调试模式

4. 按 F12 打开浏览器控制，执行以下命令修改端口号（默认不需要修改。我们可以通过 FxUI.debug.getConfig() 查看端口号是否一致，只有在不一致的时候才需要进行改）

    FxUI.debug.setConfig({
        port: xxxx //xxxx 为第二步中按钮显示的端口号
    })

5. 进入自定义插件影响的页面或者展示自定义组件的页面，每次修改完代码后，只需要重新进入该页面，最新的代码将会立即生效。

调试代码（小程序）

使用浏览器自带devtools调试