酷狗小程序目前是采用x5内核渲染的，我们可以通过以下方式开启x5内核调试选项，然后使用 Chrome Devtools 远程调试以提升酷狗小程序的调试体验。

1. 写一个最简单的酷狗小程序，调用下面的函数：

function() openDebugOptions() {
	if (!window.MiniApp) {
		throw new Error('MiniApp SDK 未初始化')
	}
	return window.MiniApp.navigateToHtmlPage({ url: 'http://debugtbs.qq.com' })
}

2. 打开手机酷狗扫码打开这个小程序后进入 TBS 调试页

点击安装线上内核，重启小程序后再次进入点击查看版本信息，如果成功显示x5内核版本则说明x5内核已成功安装。

3. 接着点击 Debug X5 进入X5内核调试选项配置页

最重要的是打开 信息 标签页，开启

• 打开TBS内核Inspector调试功能
• 打开TBS内核X5jscore Inspector调试功能

这两个选项。

其他配置项视自己需求开启，如 打开vConsole调试功能、渲染中的 内核网格线 和 FPS meter 都是很有用的功能。

如果打开 FPS meter 显示字体是方框的话，可以开启 信息-关闭X5内核Custom Font功能 修复这个问题。

4. 开启手机调试选项，使用USB连接电脑和手机，在 Chrome 地址栏输入 chrome://inspect 打开远程设备调试列表页

保持待调试的酷狗小程序在前台，开启 Discover USB devices 选项再刷新一下，这时候 Chrome 应该就可以发现这个小程序了。

如果设备显示已连接，但可调试页面列表一直为空，可以先打开 Android Chrome 再返回酷狗小程序，这样可以强制 Chrome 刷新列表。

5. 点击 WebView in com.kugou.android 下面的 inspect 链接

注意，此步可能需要科学上网，因为 Chrome 需要去谷歌的网站下载适合这个 Webview 版本远程调试的 Chrome Devtools，否则会一直显示空白。

如果能成功打开 Chrome Devtools，那么后续的步骤就和使用 ChromeDevtools 正常调试一个桌面端网页的步骤一样了。我们可以使用 Element 查看 DOM 树和样式表，使用 Console 来查看日志，使用 Performance Monitor 来监控页面性能，进行针对性的优化，使用 JavaScript Profiler 来分析 JavaScript 虚拟机的执行情况。