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 的汉化过程和所使用的工具。

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe
axihe
新版红宝书,最低44元! axihe 京东购买 / 天猫购买 / 图灵购买