体验 Chrome 开发者工具的 12个骚操作!
来源:老姚
https://juejin.cn/post/6844903604839514125
对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。
今天,大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。
网站是:umaar.com/dev-tips/
所有的我都看了,这里随便列举几个个人之前不了解,觉得挺有用的。
1.曾经,在线调伪类样式困扰过你?
2.源代码快速定位到某一行!ctrl + p
3.联调接口失败时,后台老哥总管你要response?
4.你还一层层展开dom?Alt + Click
5.是不是报错了,你才去打断点?
6.你是不是经常想不起来,在哪绑定事件的?
7.你是不是打断点时还要去改代码?
8.看dom层级的最直观的方式?
9.查一些特定的请求,过滤器用过吗?
10.在Elements面板调整dom结构很不方便?
11.想知道,某图片加载的代码在哪?Initiator!!
12.不想加载某个文件了?
多的就不列举了,可以看看开头的网站。看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。
开发者工具的功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看:
developers.google.com/web/tools/c…
中文版:
www.css88.com/doc/chrome-…
======================
补充:
见评论中多人问gif制作软件是什么。
搜索了一下,应该是www.techsmith.com/,看着说明,表示软件太专业。。
但我用过两个小软件很不错,非常容易上手:
录屏:www.cockos.com/licecap/
屏幕放大:docs.microsoft.com/zh-cn/sysin…
效果如下:
本文完。
体验 Chrome 开发者工具的 12个骚操作!相关推荐
- Chrome 开发者工具的 11 个骚技巧
作者:老姚 链接:juejin.im/post/5af53823f265da0b75282b0f 对于每个开发从业者来说,除了F5键之外,用的最多的另外一个键就是F12了.最近大神(@小鱼二)推荐我一 ...
- Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
- 请参阅:Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
- 用Chrome开发者工具调试一切
自Google发布Chrome浏览器以来,其附带的Chrome开发者工具就深受开发者们的喜爱,现在人们不仅仅用它来调试Web前端页面,还将它扩展用来调试移动应用和服务端应用.在错误报告平台Bugsna ...
- Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
- 浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
说明 浏览器工作原理与实践专栏学习笔记 DevTools Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中.它提供了通过界面访 ...
- chrome开发者工具-timeline的详细介绍
这篇文章主要记录chrome开发者工具-timeline的相关资料,为排查工作中页面请求响应返回数据慢的问题,对自己的学习/工作具有一定的参考价值. 一.概述 用户都希望他们访问的web应用是可交互且 ...
- chrome开发者工具_如何使用Chrome开发者工具查找性能瓶颈
chrome开发者工具 介绍 (Introduction) As one advances through a software development career, concerns beyond ...
- 使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
Chrome 开发者工具是前端开发工程师工具箱里使用频率最高的工具之一. 本文通过一个具体的例子,给大家分享笔者工作中,是如何通过 Chrome 开发者工具,分析一个网站的实现明细. 下图是 SAP ...
最新文章
- 现代操作系统:进程和线程总结
- shell脚本执行时报bad interpreter: Text file busy的解决方法
- (四)Maven构建多模块项目
- SpringBoot + MyBatis + Thymeleaf 之 HelloWorld
- C++基础::Stream(二)
- (十二)Linux内核驱动之poll和select
- 儿歌-宝宝学唱儿歌 ios版
- paip.基于navicate mysql的自动化报表工具总结
- HTML5期末大作业:影视视频网站设计——爱影评在线电影(10页面) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
- Postman测试导出导入Excel教程
- MacOS怎么使用分区加密功能?MacOS硬盘分区加密功能使用方法
- 计算机exsl表f4代表锁定,Excel中F4技巧,相对引用、绝对引用和混合引用
- 图文教你选择和区别A卡和N卡
- 吴恩达《构建机器学习项目》精炼笔记(2)-- 机器学习策略(下)
- MDK5的watch窗口变量删除问题
- 计算机网络 路由协议的配置_瑞尔森大学计算机网络专业
- 相控非绝缘技术为何是黄金微针效用至高点?深度剖析相控射频微针差异
- word如何翻译成中文?Word翻译成中文的方法分享
- selenium 批量下载qq邮箱附件
- JMeter基础系列(八) JMeter断言之JSON断言
热门文章
- tl-wn821n linux驱动下载,佳能 TL-WN821N 驱动程序下载-更新佳能软件(无线适配器)
- 专利申请流程及费用,需要准备什么材料,已更新
- 【SqlServer】错误 0xc00470fe: 数据流任务: 产品级别对于 组件“源 - TestDB01$”(1) 而言不足
- SAP BC 角色组织级别的参数读取和修改
- 云合影程序_毕业季主题活动——云合影
- mysql高可用——MHA详细部署过程
- UVa Problem 10067 Playing With Wheels (摆弄轮子)
- Smith Chart - for myself
- H5客户端获取Url参数的方法
- 工程(二)——DeeplabV3+语义分割训练自制数据集