如何下载devtools-frontend源码并在本地部署

1、下载 depot_tools 源码

$ git clone [https://chromium.googlesource.com/chromium/tools/depot_tools.git](https://chromium.googlesource.com/chromium/tools/depot_tools.git)

2、给depot_tools部署环境变量

$ vim ~/.bash_profile

添加路径

export PATH=$PATH:/path/depot_tools

更新全局变量

$ source ~/.bash_profile

3、下载源码

$ fetch devtools-frontend

注：不要使用git clone ，git上的代码不全，无法编译

3.1 跨域问题：需要fanqiang，然后参考 https://www.jianshu.com/p/db3964292b1c 配置代理

3.2 如出现以下内容

Running: gclient root
WARNING: Your metrics.cfg file was invalid or nonexistent. A new one will be created.
Your current directory appears to already contain, or be part of, 
a checkout. "fetch" is used only to get new checkouts. Use 
"gclient sync" to update existing checkouts.

Fetch also does not yet deal with partial checkouts, so if fetch
failed, delete the checkout and start over (crbug.com/230691).

则运行以下命令来下载代码

$ gclient sync

4、编译

$ cd devtools-frontend
$ gn gen out/Default
$ autoninja -C out/Default

5、运行devtools-frontend

5.1 通过文件路径运行

需下载google chrmoe canary版本 https://www.google.com/chrome/canary/
然后输入命令

$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary. --custom-devtools-frontend=file://XXX/devtools-frontend/out/Default/resources/inspector

其中前半部分为chrome路径,fill://xxxx为devtools-frontend路径

5.2 通过server运行

需下载google chrmoe canary版本 https://www.google.com/chrome/canary/

5.2.1 修改scripts/hosted_mode/server.js文件

第42行路径修改为

const replacedName = filePath.replace('front_end', './out/Default/resources/inspector');

5.2.2 运行命令

$ npm run server

5.2.3 在浏览器中输入

http://localhost:8090/front_end/inspector.html?ws=localhost:8081/devtools/page/{PAGE_SOCKET}（PAGE_SOCKET为需要调试的页面的socket）

5.3 通过远程连接运行

输入命令

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=[http://localhost](http://localhost/):8090/ --remote-debugging-port=9222

在浏览器中输入
http://localhost:9222#custom=true