Nunjucks Powers Mozilla

    @hippy/chrome-devtools-extensions

    0.0.1 • Public • Published

    简介

    项目集成了 chrome devtools,并在其上扩展了几个 tab,用于定制 TDF/Hippy/Voltron 等框架的调试功能。

    快速开始

    # 安装 depot_tools 工具
    git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
    
    # 打开 ~/.bash_profile 文件,将 depot_tools 添加到 PATH 中
    export PATH=$PATH:<path-to-depot_tools>
    
    # 激活环境变量
    source ~/.bash_profile
    
    # 安装依赖
    tnpm i
    
    # 开发
    npm run dev
    
    # 构建
    npm run build
    

    开发插件页面

    浏览器访问 localhost:8888/webpack-dev-server,找到插件入口页,访问即可

    如需和 debug-server 通信,参考下文。

    搭配 debug-server 开发

    cd hippy-debug-server
    npm run dev -- --env=TDF
    
    # 连接手机,打开TDF示例工程
    
    # 浏览器访问 localhost:38989/json,点击调试页的 devtoolsFrontendUrl 链接,替换端口为 8888 即可

    搭配 TDF devtools 开发

    拷贝构建产物至 TDF DevTools 项目下:

    cp -r out/Default/front_end <devtools-frontend>/public
    cp -r out/Default/extensions <devtools-frontend>/public

    架构

    chrome devtools 新增自定义 tab ,tab 内嵌 iframe,指向 vue 的构建产物,前端插件使用 MPA,每个自定义 tab 为一个 SPA。 iframe 通过 window.parent.location 获取当前调试对象的 ws 连接,并重新和 debug server 新建一个 ws 连接,用于收发自定义协议。

    ./chrome-devtools/front_end/panels/custom   # 自定义tab
    ├── BUILD.gn
    ├── CustomPanel.ts
    ├── custom-legacy.ts
    ├── custom-meta.ts
    ├── custom.ts
    └── module.json
    

    Keywords

    none

    Install

    npm i @hippy/chrome-devtools-extensions

    DownloadsWeekly Downloads

    7

    Version

    0.0.1

    License

    none

    Unpacked Size

    25.3 MB

    Total Files

    39

    Last publish

    Collaborators

    • ivanfanwu
    • zoomchan-cxj
    • chestershen