安装开发者工具-移动端

简介

使用 LightOS/JSN 技术开发的 App 是以 native 的方式运行在移动设备上，这使得传统的调试手段随之失效，有时候以浏览器模拟运行的方式并不能完整仿真 App 运行的环境，所以会出现一些在浏览器模拟运行时正常而真机设备运行异常的问题。

LightView 是 light 平台为开发调试移动端程序特别开发的一款工具，Lighting 开发套件结合 LightView 程序提供了针对 JSNative 程序的调试方法，使用此调试方法可以调试真实设备运行的状况，为应用开发的真机运行提供全流程的断点支持。

安装

Android

扫描下方二维码或点击这里下载安装包。

iOS

扫描下方二维码或在 AppStore 上搜索 lightview 进行下载安装。

环境检查

使用此调试方案之前需要检查当前的运行环境，最低的版本选项为：

• lighting >= 1.25.3
• lighting-plugin-jsnative >= 1.0.7
• lighting-plugin-debug >=1.0.15
• 工程的project.json文件中配置启用jsnative插件

当发现当前的程序版本低于此运行环境时，请按照本章节升级环境。调试手机的网络和电脑设备的网络需在同一个网段。

开启服务

1. 安装debug插件：执行 light plugin -a debug 命令
2. 运行项目：执行 light release -wb 命令，开启浏览器预览窗口（默认端口为3000）
3. 开启调试窗口：执行 light server --debug 指令，自动开启浏览器调试窗口（默认端口为4000），开启服务后每隔一定时间向同一个局域网内的 LightView 发送广播以供连接。

注：步骤2和3可以合并为一个命令：light release -wb --debug

调试 JSNative 项目

第一步：启动 LightView，打开“联机调试”页面，会自动扫描局域网内的 debugServer 并展示在“联机调试端”列表中，点击列表项即可向该 debugServer 发送连接请求，显示“已连接”则表示连接成功，若 debugServer 已关闭或者不可连接则提示连接失败，请重启 debugServer 后重试。点击导航栏右侧的“关闭调试”即可断开当前连接。

第二步：回到 LightView 首页，扫描预览窗口中控制台的二维码，例如下图：

扫描成功后，浏览器会自动打开新的调试窗口（仅第一次连接会打开），按F12键打开控制台调试工具：

第三步：现在我们可以在手机上做一些操作，如果有 console 打印信息，你就会在上图所示的控制台看到你的打印信息，现在开始调试吧！

每个设备在连接调试后，默认的日志等级各不相同，切换日志等级后，日志会按照已选的 “Log Level” 进行过滤显示。

注：

• 当需要预览不同工程或使用不同设备调试时，请重启 Debugger Server，并重新连接调试。
• 连接调试后如果发现页面白屏或没有日志信息，请点击调试页面的刷新按钮，或重启 Debugger Server。

调试 小程序2.0 项目

第一步：启用debug插件，方式如下：

1. 在release时添加启动debug的命令，如：light release -wb --debug，建议使用该方式
2. 在light项目的project.json文件中配置debug插件
   

第二步：通过light release -wb --debug或配置project.json后启动项目

第三步：项目启动后会打开两个页面，分别是debugServer页面和项目页面：

第四步：用lightview扫描debugServer页面的二维码绑定debugServer

第五步：扫描项目启动后的二维码打开小程序应用，此时会弹出一个调试页面如下，小程序项目业务逻辑代码在debug.source.js（与小程序编译出的app.miniapp.js文件一致）中，使用Ctrl+P可打开该文件并进行调试：

图片中红色数字区域内容介绍：
1-当前debugServer的地址
2-当前调试页面的地址
3-调试的文件内容，刚打开该调试页面时会断点在文件第一行
4-断点调试按钮，从左往右分别是：继续运行、执行下一步不进入方法、执行下一步并进入方法、跳出当前方法、执行下一步。更多使用方法请自行查询开发者工具相关文档
5-Console页签可进行日志输出，Sources页签可进行断点调试

第六步：在调试页面的Source页签点击某个文件最左侧的数字即可进行断点，使用方法与 Chrome 开发者工具基本一致

注意事项

1. 只支持小程序2.0 及以上版本的项目
2. 小程序调试不支持 light server --debug 命令，请严格按照上述文档内容进行操作
3. 小程序调试时，PC的调试环境基于当前调试的小程序项目使用的小程序插件（lighting-plugin-miniprogram2）版本，即project.json配置的plugins的版本，请尽量安装并使用最新版小程序插件以确保调试环境正常可用

调试 App

LightView 不仅可以在开发期对工程进行预览调试，也支持预览调试开发完成的 App。

第一步：使用 lighting 开发工具对 App 工程进行打包，将生成的 App 包提交到 light 平台，无需集成，选择对应的发布包并且点击预览，得到预览二维码。

第二步：使用 LightView 扫描此二维码，参见上文中“开始调试”步骤，只是在第二步中扫描的是已经传到平台的APP预览的二维码，就可以预览完整的APP程序，获得原生的完整的运行效果体验。

另外，如果在调试模式预览该二维码，还可以获得对此 App 调试的能力，方法参照上文中的调试步骤。

light-sdk 接口 Mock

LightView 可以在开发期代理 PC 对 light-sdk 接口的调用，并将调用结果返回给 PC。

注：要使用此功能，请检查以下工具版本：

• lightview >= 5.5
• light-sdk >= 1.0.65
• lighting-plugin-debug >= 1.0.15

第一步：在联机调试成功后，进入 LightView 的“接口Mock”页面，显示“连接成功！”即表示手机调试连接成功。

第二步：修改 PC 预览窗口的 url，增加字段 debugMockHost= debugger server 地址，例如：

将 http://192.168.2.46:3000/#/index
改为 http://192.168.2.46:3000/?debugMockHost=192.168.2.46%3A4001#/index

刷新浏览器页面后，将自动与 Debugger Server 建立通信，通信成功后控制台会打印“连接成功！”的日志，至此，PC 端和 LightView 均成功与 Debugger Server 建立了通信。

第三步：在 PC 上调用 light-sdk 的接口，在以前的版本中，浏览器控制台会打印调用信息，但不会真的调用。现在 LightView 会收到执行命令，调用接口，打印日志，并将执行结果返回给 PC 端。 PC 端收到返回结果后执行回调，完成一个完整的接口调用过程。

注：

• 每次打开“接口Mock”页面，都建立一个新的连接，上次连接的日志不作保留。
• 若连接成功后 LightView 没有响应接口调用，请进入“接口Mock”页面重试，或重启 Debugger Server。

功能菜单

在使用 LightView 预览调试的过程中，可以拿起你的手机摇一摇召唤功能菜单。

查看日志

每次预览H5/JSNative/小程序页面时，LightView 会产生一次日志记录，如果是Light工程，还可以查看工程配置以及使用的工具插件版本。

可从首页的日志列表查看全部日志记录。

开启/关闭性能监视器

预览页面时可以查看实时的性能数据（CPU、FPS、内存）。

开启/关闭导航栏

如果预览的是 App 项目，可以关闭导航栏，以得到与 App 导航栏一致的效果。

反馈

如果有任何的问题，点击反馈选项反馈遇到的问题，我们收到反馈后会在第一时间处理。

收藏

新版本的 LightView 不再保存预览的历史记录，您可以有选择性地保存预览地址。点击“收藏”选项跳转到收藏页面，保存预览页面地址。

已收藏的地址会显示在首页的收藏列表页，点击条目可以快速预览。