精华内容
下载资源
问答
  • 谷歌浏览器开发者工具的使用详解

    千次阅读 2020-09-24 09:19:06
    Sources:谷歌浏览器开发者工具中最有用的面板 Sources面板几乎是前端开发工程师最常用到的功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码...

    一、基础功能篇

    1. elements

    在elements中主要分为两大块:

    A:HTML结构面板

    B:操作dom样式、结构、事件的显示面板

    (1)点击箭头选中一个元素,可以在HTML面板中定位到该元素,并且可以在右侧styles面板中查看和编辑该元素的样式,编辑时,效果可以实时更新,这对于前端工程师解决样式问题是个大大的福利,在HTML面板中ctrl+F,可以对html中的内容进行搜索。

    在这里插入图片描述

    (2)在右侧Computed面板中,可以查看对应元素的盒图和该元素上最终生效的样式(包含继承父级元素的样式和自己的样式)

    在这里插入图片描述

    (3)Event Listeners面板可以查看对应元素绑定的事件(旧版本谷歌浏览器不太好用,更换选取元素时该面板不会实时更新,只有重新打开审查元素才可以,新版本谷歌浏览器已解决这个问题,可以实时更新)

    click是事件名称

    handler里面包含事件的回调主体内容

    useCapture表示该事件是否向上冒泡

    在这里插入图片描述

    还有一个方法,如果想要找到一个元素绑定的事件,我喜欢用google浏览器的search all files,搜索元素的id或class,从而找到该元素在js中绑定的事件,如下图:

    在这里插入图片描述

    (4)在HTML面板中选中一个元素,鼠标右键点击,会看到一个弹窗,里面有若干选项:

    在这里插入图片描述

    • Add attribute : 为该元素添加属性

    • Edit attribute:修改该元素的属性

    • Edit as HTML : 编辑该元素(你可以重写它的整个content)甚至修改它的标签名称

    • :active / :hover / :focus / :visited : 点击这四项 元素被激活 / 鼠标滑过 / 获得焦点 / 链接点击之后 四个状态下元素的样式可以在右侧styles中显示

    • Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码

    针对Break on的示例如下:

    在这里插入图片描述

    勾选Break on -> Node removal,在B界面切换到DOM Breakpoints 选项,可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码。

    2. Network

    Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态 。

    单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数:

    header(表头信息、返回信息、请求基本状态)

    Preview(返回的格式化文本信息)

    response(返回的原始信息)

    Cookies(该请求带的cookies)

    Timing(请求时间变化)

    在这里插入图片描述

    3. Application

    Application部分较简单,其中Frames主要向我们展示了本界面所加载的资源列表。还可以看到cookie和local storage 、session storage 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储 。

    在这里插入图片描述

    二、进阶篇

    1. Sources:谷歌浏览器开发者工具中最有用的面板

    Sources面板几乎是前端开发工程师最常用到的功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。

    在这里插入图片描述

    左侧双击某个js,在右侧的行号上点击进行打断点,上图中的1~6分别代表:

    1、停止当前断点调试

    2、不跳入函数中去,继续执行下一行代码(F10)

    3、跳入函数中去(F11)

    4、从执行的函数中跳出

    5、禁用所有的断点,不做任何调试

    6、程序运行时遇到异常时是否中断的开关

    当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在谷歌浏览器打断点的文件中直接修改,你就可以验证你的代码在线上是否可行。

    在这里插入图片描述

    即使在断点时,你也可以编辑代码,按ctrl+S保存之后,你会看到断点区域的背景由白色变为浅色,而断点会重新开始执行 ,此时你就可以验证改的bug是否生效。

    2. Audits

    Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能。首先打开它的主界面。

    在这里插入图片描述

    Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。

    (1)减少HTTP请求次数

    (2)使用CDN(Content Delivery Network,内容分发网络)

    (3)增加Expires Header

    (4)压缩页面元素

    (5)把样式表放在头上

    (6)把脚本文件放在底部

    (7)避免CSS表达式

    (8)把JavaScript和CSS放到外部文件中

    (9)减少DNS查询次数

    (10)最小化JavaScript代码

    (11)避免重定向

    (12)删除重复的脚本文件

    (13)配置ETags

    (14)缓存Ajax

    点击run,进行测试

    在这里插入图片描述

    3. Console

    Console面版可以输出你自己代码 ,功能非常强大,详细讲解请 点击这里 查看一位大神的文章。

    4. 移动开发模式

    点击elements左侧小手机的图标,即可进入移动开发模式,并不能完全模拟出手机的真实情况(比如手机会弹出软键盘,引起兼容问题)

    在这里插入图片描述

    三、性能篇

    一个网站的性能主要关乎两项,一是加载性能、二是执行性能。第一项可以利用Network来分析, 第二项可以利用Timeline来分析。

    加载性能分析:

    在这里插入图片描述

    Request sent(发送请求):发送HTTP请求的时间(从第一个bit到最后一个bit)

    Waiting(等待响应):通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。

    Content Download(下载):下载HTTP响应的时间(包含头部和响应体)

    在这里插入图片描述

    四、插件篇

    1. (FeHelper)WEB前端助手

    在这里插入图片描述

    展开全文
  • 最近Chrome更新后提示是否将DevTool语言设为中文,设为中文后感觉不适应,又切回英文,但是有个UK、US英文,选了个UK,后面发现每次打开开发者工具都要卡几秒,很慢,最后才发现是语言设置问题,UK切换为US瞬间恢复...

    最近Chrome更新后提示是否将DevTool语言设为中文,设为中文后感觉不适应,又切回英文,但是有个UK、US英文,选了个UK,后面发现每次打开开发者工具都要卡几秒,很慢,最后才发现是语言设置问题,UK切换为US瞬间恢复了正常的打开速度;

    展开全文
  • 恢复【谷歌浏览器开发者工具】默认设置:

    恢复【谷歌浏览器开发者工具】默认设置:

    展开全文
  • 对于SEO来说,使用开发者工具是进阶优化技能必须学会的一项,其实这个工具真的能给网站设计、优化等等带来极大的便利,下面给大家分享一个很简单的修改CSS样式的方法。下面以我博客的一个页面为实例,给大家演示一下...

    对于SEO来说,使用开发者工具是进阶优化技能必须学会的一项,其实这个工具真的能给网站设计、优化等等带来极大的便利,下面给大家分享一个很简单的修改CSS样式的方法。

    下面以我博客的一个页面为实例,给大家演示一下

    测试预览

    例如,我们需要修改内容页标题的样式,我们可以将鼠标移动到标题处,然后右键点击→→检查(审查元素)

    如上图所示,右上角可以控制开发者工具窗口的位置,为了方便,我选了新窗口

    这个时候,我们就可以修改网页的源码了,例如:将h1标签修改成h2 我们看看有什么变化

    这个时候,就可以看到标题的字体变小了,其实就是由H1标签的样式变成了H2的

    我们再修改样式看看

    我们给这个标题加一个样式,或者直接在样式上进行修改,例如,我加了一个字体的大小属性

    是不是立即生效了,字体变大了很多。

    修改CSS文件

    有没有发现改了之后网页变得巨丑务必,不用着急,刷新一下是不是就恢复正常了。那如何才能保持测试的样式呢?

    这个就需要修改css文件了

    图就不截了,上面的图,我们将鼠标移动到style.css 就会显示样式文件的地址,我们只要找到这个文件,将之前修改得样式在文件中做修改并保持,最后更新浏览器缓存,就OK了

    来源:本文由思享SEO博客原创撰写,欢迎分享本文,转载请保留出处和链接!

    分享:

    展开全文
  • 1、如图所示,对于有些js文件,响应中无返回数据,Failed to load response data,当然本来是应该有数据,你用火狐浏览器看,就是有的,或者直接在浏览器地址栏里输入url,也可以看到返回信息2、preserve log的作用...
  • 访问 DevTools 访问 DevTools 在 Windows 上 在 Mac 上 ...检查检查(取消停靠第一个后按) ...Shift + 点击颜色选取框 ...检查元素工具 Ctrl + Shift + C Cmd + Shift + C
  • 老练的前端开发同学应该非常熟悉,我曾以为是每个前端开发的必备技能,但是事实上很多人不知道,f12打开开发者工具选择elements可以定位元素(快速)、修改css样式(直观)、查看事件等等,注意是临时修改,刷新则还原...
  • 此时只需要按下键盘的esc键就可以啦
  • 切换到了手机模式 所以显示出来的是圆点 不是鼠标 F12 打开开发者模式 Ctrl+Shift+M(切换PC浏览和手机浏览快捷方式) 或者![在这里插入图片描述](https://img-blog.csdnimg.cn/2
  • 谷歌浏览器开发者工具的作用

    千次阅读 2017-06-23 04:22:20
    就是下面这一行常用工具: 1.Elements:这个大家经常用,肯定很熟悉了。元素面板,用来操作DOM和样式,可以 直接在上面进行编辑。 2.Console: 控制台,可以在代码中通过console.log(data)来打印出数据,也可以直接...
  • 谷歌 DevTools(F12)在前端开发中起着重要的作用,使用好它你在开发中将省力很多,那么我记录一下他的一些使用有哪些,可能不全望谅解。 Elements 的使用 1.1、当你鼠标悬浮在某个HTML元素上时,相应的页面会...
  • 1、开发者工具的Timeline面板 Chrome浏览器开发者工具的Timeline面板,是查看"刷新率"的最佳工具。这一节介绍如何使用这个工具。 首先,按下 F12 打开"开发者工具",切换到Timeline面板。 .....
  • 谷歌浏览器开发者工具 preserve log
  • 在二级菜单中找到“开发者工具”,鼠标左键单击选择该功能按钮,进入开发者工具操作中。 正在上传…重新上传取消​ 点击开发者工具后会在页面中弹出一个开发者的窗口,位于浏览器页面的右上方。 正在上传...
  • 在通过开发者工具去把一些代码时,有些内容是通过某些触发来动态添加到页面上的,并且在操作开发者工具时会被移除,比如下面的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&...
  • START 本文主要记录,vue开发者工具 vue-devtools的下载安装配置。 截止目前最新版本为5.3.x (githup) vue-devtools github 地址 ...打开谷歌浏览器 (输入) chrome://extensions/ 将下载好的文件直接拖到浏览
  • 谷歌浏览器Chrome开发者工具详解

    千次阅读 2019-06-17 20:20:19
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Appli...
  • 原文链接:https://segmentfault.com/a/1190000010302235开发者工具初步介绍在利用chrome浏览器进行web端测试,我们可以通过F12键调起开发者工具。chrome开发者工具最常用的四个功能模块:Elements:主要用来查看...
  • 可以用谷歌浏览器开发者工具中的Performance绘制火焰图对网页进行分析。 接下来我们通过一步步使用Performance,来看看Performance有哪些强大的功能! 1、工具位置 打开f12开发者工具,选中Performance。我们...
  • 一开始打开f12时,Console是正确的,但是name中是空白的,如图: 但是name是空白的 导致无法查看数据的结果 经过一番按来按去 发现应该点ALL这个选项:如图: ...同时网上也有这样的解决方法,希望对你有所帮助!...
  • 本文导读:Chrome谷歌浏览器开发者工具中Profiless面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,利用这个面板你可以追踪网页程序的内存泄漏问题,进一步提升程序的JavaScript执行性能。下面简单...
  • 谷歌浏览器开发者模式

    万次阅读 多人点赞 2018-11-23 11:55:10
    一般在windows系统上浏览器开发者工具打开都是按F12快捷键,按F12快捷键打开谷歌浏览器如下图所示,下面来分别解释一下各个功能 一、第一个功能:定位的作用,点击一下这个图标,将鼠标放在任意页面上的位置,就...
  • 谷歌浏览器开发者工具标签介绍: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般在windows系统上浏览器开发者工具打开都是按F12快捷键. ==&gt;Element标签:该标签使用来查看...
  • 谷歌浏览器调试技巧

    2017-11-30 10:01:17
    网上看到了一个关于浏览器调试的文章,我整理成了文档希望对大家有用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,099
精华内容 5,639
关键字:

谷歌浏览器开发者工具