前端调试工具（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. ci框架 自定义配置方法

    系统自动在Application文件夹下生成的config.php文件,采用key-value关联数组的形式来存放配置项和值.为了使结构更清晰,手动新建另外一个配置文件myconfig.php,所采用 ...

  2. 怎么使用chrome浏览器查看内存是否有泄漏

    一:什么是内存泄漏 javaScript会在创建变量时分配内存并且在不适用变量时会自动的释放内存,这个释放内存的过程极为垃圾回收,程序运行需要内存,只要程序提出要求操作系统或者运行时就必须提供内存,对 ...

  3. POJ3734-Blocks【EGF】

    正题 题目链接:http://poj.org/problem?id=3734 题目大意 用思种颜色给\(n\)个格子染色,要求前两种颜色出现偶数次,求方案. \(1\leq T\leq 100,1\l ...

  4. P7444-「EZEC-7」猜排列【dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P7444 题目大意 一个长度为\(n\)的排列,已知每个\(c_i\)表示那个排列中\(mex\)为\(i\)的区间 ...

  5. 使用AC自动机解决文章匹配多个候选词问题

    解决的问题 KMP算法用于单个字符串匹配,AC自动机用于文章中匹配多个候选词. 流程 第一步,先将候选词先建立前缀树. 第二步,以宽度优先遍历的方式把前缀树的每个节点设置fail指针, 头节点的fai ...

  6. PHP的SPL扩展库（一）数据结构

    SPL 库也叫做 PHP 标准库,主要就是用于解决典型问题的一组接口或类的集合.这些典型问题包括什么呢?比如我们今天要讲的数据结构,还有一些设计模式的实现,就像我们之前讲过的观察者模式相关的接口在 S ...

  7. VS Code环境配置

    1.语言配置 2.Node.js安装配置 系统变量中NODE_PATH,变量值为nodejs的安装路径. 用户变量Path包含%NODE_PATH% 如果说通过CMD打开的命令行可以执行node -v ...

  8. QQ三国 秘制机簧去哪打？打的太慢？

    我在完成这个任务时卡了很久,因为打的效率极低,因此最后我是如何完成的. 1. 先说打谁吧,刚开始我打机簧蜘蛛,就没打出来过,,后来换了机簧车,掉率就上升了,建议打机簧车. 2. 如果你一直打不出来,建 ...

  9. LeetCode352 将数据流变为多个不相交区间

    LeetCode352 将数据流变为多个不相交区间 1 题目 给你一个由非负整数 a1, a2, ..., an 组成的数据流输入,请你将到目前为止看到的数字总结为不相交的区间列表. 实现 Summa ...

  10. 2021.7.27--Benelux Algorithm Programming Contest 2020 补提

    I Jigsaw 题目内容: 链接:https://ac.nowcoder.com/acm/contest/18454/I 来源:牛客网 You have found an old jigsaw pu ...