{"id":19219957,"url":"https://github.com/huanghaiyang/chrome-devtools-study","last_synced_at":"2025-05-13T01:09:18.743Z","repository":{"id":73416495,"uuid":"70296414","full_name":"huanghaiyang/chrome-devtools-study","owner":"huanghaiyang","description":"chrome开发者工具简要学习","archived":false,"fork":false,"pushed_at":"2016-10-17T09:08:00.000Z","size":1089,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T01:09:11.815Z","etag":null,"topics":["audit","chrome","chrome-devtools","devtools","dom","learning","profile","timeline"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huanghaiyang.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-08T02:07:50.000Z","updated_at":"2025-03-04T06:28:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"ebc0bef4-9e92-4d1e-a1cf-177650270c25","html_url":"https://github.com/huanghaiyang/chrome-devtools-study","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghaiyang%2Fchrome-devtools-study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghaiyang%2Fchrome-devtools-study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghaiyang%2Fchrome-devtools-study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghaiyang%2Fchrome-devtools-study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huanghaiyang","download_url":"https://codeload.github.com/huanghaiyang/chrome-devtools-study/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851069,"owners_count":21973674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audit","chrome","chrome-devtools","devtools","dom","learning","profile","timeline"],"created_at":"2024-11-09T14:33:25.542Z","updated_at":"2025-05-13T01:09:18.734Z","avatar_url":"https://github.com/huanghaiyang.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chrome DevTools概述\n\n## 访问DevTools\n\n在已打开的浏览器页面：\n+ 选择菜单![菜单按钮](https://developer.chrome.com/devtools/devtools/images/chrome-menu.png) \u003e Tools \u003e Developer tools\n+ 右键点击页面元素，选择**检查(N)**\n\n通过快捷键方式：\n+ ```Ctrl``` + ```Shift``` + ```I```  打开\n+ ```Ctrl``` + ```Shift``` + ```J```  打开并定位到控制台(Console)\n+ ```Ctrl``` + ```Shift``` + ```C```  打开并切换到检查元素模式\n\n## DevTools窗口\n如下所示：\n![DevTools窗口](https://developer.chrome.com/devtools/devtools/images/devtools-window.png)\n包含功能：\n+ [Elements](elements.md)\n+ [Resources](resources.md)\n+ [Network](network.md)\n+ [Sources](sources.md)\n+ [Timeline](timeline.md)\n+ [Profiles](profiles.md)\n+ [Audits](audits.md)\n+ [Console](console.md)\n+ [Application](applicatiion.md)\n+ [Device Mode](device-mode.md)\n+ [Animations](animations.md)\n\n同时可以使用```Ctrl``` + ```[``` 或者 ```Ctrl``` + ```]``` 切换功能面板\n\n## DOM节点及样式检查\n使用[Elements](elements.md)面板可以查看DOM树结构，允许检查和编辑DOM元素。\n![Elements面板](https://developer.chrome.com/devtools/devtools/images/elements-panel.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/dom-and-styles)\n\n## 控制台\nJavascript console 提供了两个主要的功能来测试页面和应用\u003c/br\u003e\n+ 在开发过程中记录诊断信息\n    ```console.log()``` 和 ```console.profile()```\n+ 一个shell风格的可与文档和DevTools交互的控制台\u003c/br\u003e\n    可以使用```$()```命令选择文档元素或者使用```profile()```函数开启cpu分析功能\n\n如下所示：\n![Console面板](https://developer.chrome.com/devtools/devtools/docs/console-files/expression-evaluation.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/console)\n\n## JavaScript调试\n如下所示:\n![sources面板](https://developer.chrome.com/devtools/devtools/images/js-debugging.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/javascript-debugging)\n\n## 改善网络性能(性能监控)\n通过**Network**功能可以实时查看资源的请求和下载耗时等详细信息\u003c/br\u003e\n如下所示:\n![network面板](https://developer.chrome.com/devtools/devtools/images/network-panel.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/network)\n\n## 审查和建议\nAudit功能面板能够通过网页的加载进行分析，之后提供建议与优化方法来降低页面的加载耗时并提高页面的响应速度\u003c/br\u003e\n如下所示:\n![audit面板](https://developer.chrome.com/devtools/devtools/images/audits-panel.png)\n\n## 提高渲染性能\nTimeline面板提供了一个完整分析页面或者app的具体时间花费的详细信息，从加载资源到解析javascript，计算样式以及页面绘制\u003c/br\u003e\n如下所示\n![timeline面板](https://developer.chrome.com/devtools/devtools/images/timeline-panel.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/timeline)\n\n## Javascript \u0026 css\nProfiles面板能够让你分析网页或者app的执行时间以及内存使用情况，这能够帮助你了解资源是如何被使用的，如何优化你的代码，提供的主要分析功能如下：\n+ CPU分析\u003c/br\u003e\n    展示页面中JavaScript函数执行时间\n+ 堆栈分析\u003c/br\u003e\n    展示页面中Javascript兑现合相关DOM节点的内存分配情况\n+ Javascript分析\u003c/br\u003e\n    展示了脚本的执行时间\u003c/br\u003e\n如下所示：\n![profilers面板](https://developer.chrome.com/devtools/devtools/images/profiles-panel.png)\n[详细介绍](https://developer.chrome.com/devtools/devtools/docs/profiles)\n\n## 存储检查\nResources面板能够查看网页已经加载的资源，能够让你与HTML5的Database，Local Storage ，Cookies， AppCache进行交互      \u003c/br\u003e                                   \n如下所示：\n![resources面板](https://developer.chrome.com/devtools/devtools/images/resources-panel.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanghaiyang%2Fchrome-devtools-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuanghaiyang%2Fchrome-devtools-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanghaiyang%2Fchrome-devtools-study/lists"}