San Devtools 使用指南

San Devtools 使用指南

san-devtoolsBrowser developer tools extension for debugging San.项目地址:https://gitcode.com/gh_mirrors/sa/san-devtools

项目介绍

San Devtools 是一个专为 San 框架设计的调试工具，提供了两种调试方式：浏览器插件和命令行工具。这两种方式可以帮助开发者快速方便地调试 San 应用。San Devtools 支持多种浏览器和环境，包括 IE、Safari、Mobile 和 Electron 等。

项目快速启动

安装

通过 NPM 安装

npm install -g san-devtools

通过 GitHub 下载

git clone https://github.com/baidu/san-devtools.git
cd san-devtools
npm install
npm run build:extensions

使用

命令行工具

安装完成后，可以使用 san-devtools 或 sand 命令启动本地 WebSocket 服务，实现远程调试。

sand

根据提示将 ws-backend.js 添加到要调试页面的 San.js 之前，然后打开要调试的页面，进入 http://127.0.0.1:8899 页面选择需要 debug 的页面，开始调试。

浏览器插件

在 Chrome 网上应用商店安装 San Devtools 扩展，安装完成后，在 Chrome 的工具栏中会看到 San 的图标。刷新当前页面，若检测到当前页面有使用 San 并且 san debug 为 true，图标会变为 San 标准的蓝色，并且下方会显示出检测到的 San 的版本号。

应用案例和最佳实践

案例一：使用 San Devtools 调试 Electron 应用

1. 在 Electron 项目中安装 San Devtools。
2. 启动 San Devtools 命令行工具。
3. 在 Electron 应用中嵌入 ws-backend.js。
4. 打开 San Devtools 页面进行调试。

案例二：使用 San Devtools 调试移动端应用

1. 在移动端项目中安装 San Devtools。
2. 启动 San Devtools 命令行工具。
3. 在移动端应用中嵌入 ws-backend.js。
4. 打开 San Devtools 页面进行调试。

典型生态项目

San Store

San Store 是一个用于状态管理的库，与 San Devtools 配合使用可以更好地进行状态调试。

San Router

San Router 是一个用于路由管理的库，与 San Devtools 配合使用可以更好地进行路由调试。

San Components

San Components 是一个组件库，提供了丰富的组件，与 San Devtools 配合使用可以更好地进行组件调试。

通过以上步骤，您可以快速启动并使用 San Devtools 进行调试，同时了解其典型生态项目，以便更好地进行开发和调试工作。

san-devtoolsBrowser developer tools extension for debugging San.项目地址:https://gitcode.com/gh_mirrors/sa/san-devtools