前端调试工具（DevTools）

开启：F12

布局

切换PC和移动端

页面元素的快速测试技巧

保持元素的hover等状态：选中当前行点击右键

元素状态改变的监控技巧

触发断点后元素状态不会再改变,可以在sources里关掉断点，也可以重新右键点击删除断点

样式快速定位、修改

定位：

  1. 选中相关地方点击右键检查，则会自动跳转到选中元素的样式页面
  2. 打开检查工点击图片中的箭头，然后去页面中将鼠标悬浮在修改的地方（常用）

鼠标点击后定位结束

修改：

  • 画横线表示样式被覆盖
  • 在检查工具中做的修改不会更新到本地代码，刷新后恢复原状

查看脚本使用率

红色部分代表未使用的脚本占比

监控页面动画变更

设置浏览阻止织某些资源

前端调试工具（DevTools）的更多相关文章

  1. 前端调试工具DevTools处理网络请求

    DevTools处理网络请求 位置:network 1.是否启用网络处理功能 2.清除历史 3.过滤器,自定义筛选 4.是否保留先前的历史,因为每次刷新会删除历史重新加载,选中后新老请求都在可做对比 ...

  2. 【F12】谷歌浏览器F12前端调试工具 Console

    谷歌浏览器F12前端调试工具 Console 前言 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的C ...

  3. 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码

    工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  4. 火狐调试工具-DevTools

    狐调试工具 - DevTools 咱们做写js 代码的时候,遇到的一个最大的问题就是调试问题,很多开发者在写 js 代码的时候,经常都非常痛苦.但是我们如果掌握好相应的调试工具,那么就可以比较游刃有余 ...

  5. 移动前端调试工具-Weinre真机调试

    之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...

  6. BrowserSync前端调试工具使用

    上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...

  7. 自己开发前端调试工具:Gungnir

    文章目录 1. 界面介绍 2. 项目资源管理界面 3. 文本编辑器功能 4. 代理功能 4.1. 自动下载线上文件 4.2. 使用本地已有文件 4.3. 代理整个目录 4.4. 执行文件内容后返回结果 ...

  8. web前端调试工具

    1.firebug入门指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html 2. Console命令详解,让调试js代码变得更 ...

  9. spy-debugger 前端调试工具

    一站式页面调试.抓包工具.远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等).支持HTTP/HTTPS,无需USB连接设备.    Language: Engl ...

随机推荐

  1. setTimeout 与setInterval的区别

    setTimeout(code,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式 setInterval(code,millisec) 方法可按照指定的周期(以毫秒计)来调用函数或计算 ...

  2. mysql where in 数组解决小tips

    由于sql语法要求,不可在in后面直接连数组,若数组形式下,则需要转换成逗号隔开的字符串 <?php$arr = array(1,2,3,4,5);$arr_string= join(',', ...

  3. P4249-[WC2007]剪刀石头布【费用流】

    正题 题目链接:https://www.luogu.com.cn/problem/P4249 题目大意 \(n\)个点的竞赛图有的边已经确定了方向,要求给剩下的边确定一个方向使得图的三元环最多. \( ...

  4. P7276-送给好友的礼物【dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P7276?contestId=39577 题目大意 \(n\)个点的一棵树,\(k\)个关键点,两个人从根出发分别走 ...

  5. P3211-[HNOI2011]XOR和路径【高斯消元】

    正题 题目链接:https://www.luogu.com.cn/problem/P3211 题目大意 一个\(n\)个点\(m\)条边的无向图,从\(1\)到\(n\)随机游走.求期望路径异或和. ...

  6. 【Golang】Go 通过结构(struct) 实现接口(interface)

    一.通过结构(struct) 实现 接口(interface) 1.在了解iris框架的时候,经常看到有这样去写的使用一个空结构体作为接收器,来调用方法,有点好奇这样做有什么意义. 解释:在 Go 语 ...

  7. VUE自学日志02-应用与组件实例

    准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例 创建一个应用实例创建一个应 ...

  8. 在昨天夜黑风高的晚上，我偷了隔壁老王的Python入门课件，由浅入深堪称完美！

    隔壁老王是一个资深码农,就业教育事业的秃顶之才昨天我下楼打酱油,看他迎面走来,满目春光我好奇的问道:老王,有什么好事,隔壁小花叫你上门了吗?老王:秘密!!我心想:哎呦~不错啊半晚之时,连猫狗都睡着了, ...

  9. 无服务计算应用场景探讨及 FaaS 应用实战

    作者 | 宋文龙(闻可)  阿里云全球技术服务部高级交付专家 什么是无服务计算 无服务器计算(Serverless Computing)在构建和运行应用时无需管理服务器等基础设施.它描述了一个细粒度的 ...

  10. 4 个场景揭秘，如何低成本让容器化应用 Serverless 化？

    作者 | changshuai FaaS 的门槛 Serverless 形态的云服务帮助开发者承担了大量复杂的扩缩容.运维.容量规划.云产品打通集成等责任,使得开发者可以专注业务逻辑.提高交付速度 ( ...