阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Chrome 开发者工具 教程

      Chrome 开发工具指南

      Chrome DevTools 是公认的优秀的前端调试工具,由于功能强大,所以使用起来有一定的学习门槛,与此同时 Chrome DevTools 暂时没有中文手册,对于不太熟悉英文的同学会比较吃力。

      本项目的初衷是为想使用或者正在使用 Chrome DevTools 的同学提供一个中文手册,方便大家学习使用这个优秀的工具,提高前端开发效率和质量!

      谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。

      该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。

      适用人群

      这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作。通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo 。

      学习前提

      在你继续本教程之前,你必须对简单的术语有一定的了解,比如源码,文档等等。因为在你的组织下处理各级软件项目,如果你有软件工作的知识在软件开发和软件测试流程那是最好的。

      参考英文:Chrome开发者工具英文文档

      最新英文地址:https://developers.google.com/web/tools/setup/?hl=en

      Chrome 开发者工具

      Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。

      打开 Chrome 开发者工具

      • 在 Chrome 菜单中选择 更多工具 > 开发者工具
      • 在页面元素上右键点击,选择 “检查”
      • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

      Chrome Devtools 是谷歌浏览器自带的一个开发者调试工具,Chrome 本身汉化程度已很高,但 Devtools 工具并没有汉化,导致许多开发者在调试过程中难免遇到一些不方便,虽然网上可以下载一些网友汉化过的 resources.pak,但 Chrome 更新频繁,不同的版本不能通用替换,网上也很少有这方面的汉化教程,我这里简单说一下 resources.pak 的汉化过程和所使用的工具。

      目录
      目录