> * 原文地址：[5 lesser-known features of Chrome Devtools](https://levelup.gitconnected.com/5-lesser-known-features-of-chrome-devtools-1ff3cd2a7518)
> * 原文作者：[Manan Tank](https://medium.com/@manantankm)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/article/2020/5-lesser-known-features-of-chrome-devtools.md](https://github.com/xitu/gold-miner/blob/master/article/2020/5-lesser-known-features-of-chrome-devtools.md)
> * 译者：[贺雪](https://github.com/Amy-Designer)
> * 校对者：[calali](https://github.com/calali)   [Xiny](https://github.com/x1ny)

# 5 个鲜为人知的 Chrome 开发者工具的特性

![](https://cdn-images-1.medium.com/max/3850/1*426iOM0yGx-ihIAp1GD7RQ.png)

## 1. 切换类名

跳转到 `.cls` 选项卡，可以进行类名的切换

![](https://cdn-images-1.medium.com/max/2000/0*xMFl7REC8Ve1YiJF.gif)

## 2. 滚动到视图

你是否在查看 HTML 源码的时候无法定位至页面上的对应元素？嘿，只需要滚动到视图就可以了！

![](https://cdn-images-1.medium.com/max/2000/0*RNNCkKfY2hotSxJD.gif)

## 3. 创建并运行代码段

你是否想运行一些 javascript 代码，但是碍于内容太多，把它粘贴到控制台会感觉很奇怪吗？嘿，你其实可以创建代码段，然后运行它！

![](https://cdn-images-1.medium.com/max/2000/0*heDLZmGRXJQqiZDO.gif)

## 4. 添加类名和自动建议

当您使用 `.cls` 选项卡添加类名时，它会联想一些已存在CSS中相似的类，以便于你将他们快速进行比较

![](https://cdn-images-1.medium.com/max/2000/0*ta6DU34T77aLDwQV.gif)

## 5. designMode

使用 designMode，你可以直接编辑所有内容

![0*bZm_fnZYh8CzTIe-](https://user-images.githubusercontent.com/5164225/93283292-d2e3f800-f802-11ea-85ee-6959bdea35ba.gif)

---

**先这样吧，伙计们!**

希望你能找到一两个新玩意儿来改进你的开发者工具的工作流程。干杯！

> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
