Chrome 开发者工具各种骚技巧
点击上方的终端研发部,右上角选择“设为星标”
作者:老姚
链接: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…
效果如下:
回复 【idea激活】即可获得idea的激活方式
回复 【Java】获取java相关的视频教程和资料
回复 【SpringCloud】获取SpringCloud相关多的学习资料
回复 【python】获取全套0基础Python知识手册
回复 【2020】获取2020java相关面试题教程
回复 【加群】即可加入终端研发部相关的技术交流群
最近于哥也在玩视频号啦,主要针对于程序员方向的,大家可以去关注一波:
提高国内访问 github 速度的 9 种方法!
SQL查找是否"存在",别再count了,很耗费时间的
美团面试题:Java-线程池 ThreadPool 专题详解
玩转Java8Stream(一、从零认识Stream)
玩转Java8Stream(二)——函数式接口
C++之父:C++的成功属于意料之外,C++11是转折点
相信自己,没有做不到的,只有想不到的
在这里获得的不仅仅是技术!
喜欢就给个“在看”
Chrome 开发者工具各种骚技巧相关推荐
- chrome开发者工具各种骚技巧
作者:老姚 链接:https://juejin.im/post/5af53823f265da0b75282b0f 对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了.最近大神(@ ...
- Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
- chrome 插件开发各种功能demo_Chrome 开发者工具各种骚技巧
优质文章,及时送达 曾经,在线调伪类样式困扰过你? 源代码快速定位到某一行!ctrl + p 联调接口失败时,后台老哥总管你要response? 你还一层层展开dom?Alt + Click 是不是报 ...
- CHROME开发者工具的小技巧
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充 ...
- Chrome 开发者工具的小技巧
来源:陈皓 - 酷壳 CoolShell :链接:https://coolshell.cn/articles/17634.html Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不 ...
- Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
- Chrome开发者工具使用console.trace的一个小技巧
我们在Chrome开发者工具里调试的时候,有时需要把函数执行的调用堆栈信息保存到本地以便进一步处理: 然而Call stack列表下的数据无法复制粘贴. 其实,我们只需要在console控制台里,输入 ...
- 小技巧:Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号,只会展开其继承结构的第一层直接子节点: 而Alt+Click,可以将该元素第一个子节点,以及该子节点原型链上的节点全部展开.将下图和上图进行比较 ...
- 在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
最新文章
- Linux 下使用 NMON 分析系统性能
- 为你痴,为你狂,小车载我梦飞翔
- oracle添加表的索引,oracle批量添加指定表前缀的索引SQL语句
- 洛谷 P1969 积木大赛 —— 水题
- 海龟交易法则15_万事俱备
- GOF23种设计模式在Java中的应用(part 1)
- python opencv 界面按钮_如何使用Python构建简单的UI?
- angular4.0 父子组建之间的相互通信
- Python小项目(一)-----------计算体脂率
- that、this、these、those的区别
- 数字舵机c语言编程,舵机入门
- 【iOS 1 行代码系列】之 一行代码搞定TableView组头悬停
- python input获取多行文本
- Mac 如何升级 Ruby 版本
- 请保持内心中最后一点良知
- windows 10 HBase保姆级安装教程
- i7处理器好吗_i5和i7区别有多大,性能差距大吗?i5-9400F和i7-9700F的区别对比
- 超低功耗蓝牙模块的常用工作模式
- C语言计算短路电流的软件,短路电流计算软件 Archives | Trace Software International
- 0.1+0.2真不等于0.3?你知道不
热门文章
- java多态实现的三种形式,逆袭面经分享
- Golang连接kafka报错: Errorkafka: client has run out of available brokers to talk to
- LY-100系列的纬编机纱长监控器
- 掌握这些Java 后端面试题,20K妥妥的,400多人在学习
- 【洛谷 P1970】 [NOIP2013 提高组] 花匠
- 植物叶片——相对电导率Relative conductivity
- 对这个短视频提取的方法,来提提意见
- NewStarCTF 公开赛赛道week3 web writeup
- Android 8.1 【FriendlyARM】温度压力传感器-BMP180 驱动开发
- matlab矩阵的第一列,matlab提取矩阵第一列