Chrome开发工具 对 Chrome 开发工具的贡献

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 对 Chrome 开发工具的贡献有很多方法可以提高你同事的开发效率。这可能是通过分享你所知道的或是用那些记录功能提供帮助或者写一个补丁来改进我们所使用的工具。你怎么帮助?除了对源代码的贡献以外，下面的集中方式都可以参与帮助： 文档创作 为开发工具提供文档来源的是 GitHub 上的贡献,并且总是受欢迎的。参考和教程指南受益于您的帮助。 联系 @paul_irish 的更多信息，你可以帮助在这里。分享你所学到的通过 GIF，Vines 或注释分享你学到的知识覆盖新的实验特性 改进设计的所有部分的 UX 工具 分析和管理问题 检查特征或错误新的实验功能覆盖率 订阅 devtools-reviews@chromium.org 中所有评论待编码的邮件列表 订阅的 RSS 反馈工具。 按照 @chromedevtools 和 @在推特包括反馈计工具 有足够的行动和开发人员都急于知悉的更新的内容 对于所有部件改进的 UX 设计工具 你的设计想法在 UX 很受欢迎。 问题分析与管理 查看所有打开的工具项目。在适当的时候要求减少或为他们自己提供。 检查特征或错误 JavaScript 的代码库和设置向导可以让你快速入门 保持更新开发工具团队将会从使用该工具的开发者那里获取反馈。如果你想保持更新，你可以订阅在 crbug 下面的频道。请记住标记那些对你也有影响的问题。最后，不要忘记提交的功能请求或你找到的调试报告。不仅是关于开发者工具的，整个 Chrome 的信息都对我们有用。Cr-Platform-DevTools Cr-Platform-DevTools-HTML Cr-Platform-DevTools-Memory Cr-Platform-DevTools-Mobile Cr-Platform-DevTools-Performance Cr-Platform-DevTools-UX对开发者工具源代码的贡献Chrome 开发工具实际上是用 JavaScript 和 CSS 编写的应用。如果你熟悉这些技术，你就知道如何写一个补丁。一些人已经这样做了，于是有了颜色选择器，文件选择器等功能，这些都是由和你一样的开发者贡献的。IRC 频道中：#Chrome 开发工具我们现在正在重新编写这份向导。如果你想跟着已经完成的早期工作继续帮助我们，请阅读 DevTools Contributing(draft) 上的评论Step 1: 开始要开始为开发工具做出贡献，你需要注意以下几件事：获取代码通过克隆 git 的库 Blink 进行源代码下载。这个过程可以在 30 - 60 分钟（取决于你的连接）。git clone https://chromium.googlesource.com/chromium/blink.git安装 Canary当 Blink 下载后，在 Mac OS/Windows 系统上安装 Canary 或下载最新的浏览器 DevTools 前端服务运行本地服务器器。本地 Web 服务器将服务从某些端口（如 8000）来运行来自 blink/Source/devtools 目录下的文件。 当 Blink 库已经准备好厚，进入 devtools 文件夹： cd blink/Source/devtools 从那里你可以使用以下命令在 8000 端口运行一个本地服务器：python -m SimpleHTTPServer 然后，用你喜欢的浏览器打开 http://8000/front_end/inspector.html 就可以开始调试了！为什么服务器需要从开发工具目录下运行？当远程调试和开发前端的 Blink 时，InspectorBackengCommands.js 文件是基于 protocal.json 文件的内容生成的，而不是基于 Chromium 构建系统时的反馈。protocol.json 文件放在 /devtools 目录下 front_end 文件夹的父文件夹中。这就是为什么你需要在 devtools 目录下运行 Web 服务器。注意：如果你已经检查过整个 Chromium 源，你将需要从 /src/third_party/WebKit/Source/devtools 目录来运行 web 服务器。如果你的功能需要对后端代码进行修改，那么你一定要去校验和生成 Chromium。否则，你只需要安装一个前端文件的网络服务器，并使用远程调试选项运行浏览器。注： protocol.json 文件描述了前端和后端之间的 API。它在前端和后端的建设阶段会生成 API 存根。当远程调试的 API 的前端时，inspectorbackendcommands.js 是由前端代码生成的。欲了解更多信息，阅读 Chromium How-tos.。 Step 2: 运行 Chromium 的一个边缘构件要开始，需要得到一个 Chromium 的 edge-build。这些都是可用于所有平台。在运行 Chromium 时，需要一对命令行标记（或开关）。 使用标记来运行 Canary：在 Windows 上右键点击你的“谷歌浏览器”图标 选择属性，并将命令行标记到目标区域的结尾部分。 举个例子:"C:\Users\%username%\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\Users\%username%\chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.html在 OS X 上在终端里，在程序目录结尾添加标记来运行 Canary。/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 --no-first-run --user-data-dir=~/temp/chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.htmlNote: 就像上面一样，你要在任何的一个空格前加一个斜线 "\"。在 Linux 上在 chromium-browswer 命令后面加上标记来运行它：chromium-browser --remote-debugging-port=9222 --no-first-run --user-data-dir=~/temp/chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.html这些开关用于做什么？--user-data-dir=~/temp/chrome-dev-profile 用于说明浏览器将在哪里查看其全部状态。这可以是正在运行的服务器上的一个相对路径。这可以指向任何地方。你可以随时清除你的个人资料。--remote-debugging-port=9222 启用特殊端口上的 HTTP 远程调试，这个端口就是 localhost 所对应的端口。--no-first-run跳过第一次运行任务，不管它实际上是不是第一次运行。http://localhost:9222#http://localhost:8000/front_end/inspector.html我们加载了 9222 端口上的监视表，但我们将开发工具指定到前端的一个哈希 URL 上：http://localhost:9222#。因为我们将 DevTools 前端加载到 8000 端口，所以我们想将那个端口匹配到这里。假设您的 Web 服务器是从源目录运行的，则其路径应该指向 inspector.html 的有效路径。之前的 ——remote-debugging-frontend 标志则不再使用。