精华内容
下载资源
问答
  • Google开发者工具面板-network详解

    万次阅读 多人点赞 2018-05-25 09:23:12
    Google开发者工具面板-network详解 1 开发者工具面板 面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板。这些按钮的...

    Google开发者工具面板-network详解

    1 开发者工具面板

        面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板。

    这些按钮的功能点如下:

    ·        Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

    ·        Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell

    ·        Sources:断点调试JS

    ·        Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。

    ·        Application:记录网站加载的所有资源信息,包括存储数据(Local StorageSession StorageIndexedDBWeb SQLCookies)、缓存数据、字体、图片、脚本、样式表等。

    ·        Security:判断当前网页是否安全。

    ·        Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

    2 Network面板

    2.1 面板功能分布

        Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、RequestResponse等),可以根据这个进行网络性能优化。该面板主要包括5大块窗格:

    1. Controls 控制Network的外观和功能。
    2. Filters 控制Requests Table具体显示哪些内容。
    3. Overview 显示获取到资源的时间轴信息。
    4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
    5. Summary 显示总的请求数、数据传输量、加载时间信息。

    2.2 请求资源面板

    1. Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
    2. Status HTTP状态码。
    3. Type 请求的资源MIME类型。
    4. Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    5. Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
    6. Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
    7. Watefall显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

    2.3 捕获屏幕

        Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

        以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

        双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

    2.4 查看DOMContentLoaded和load事件信息

    DOMContentLoaded和Load这两个事件会高亮显示。

    DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。

    load事件会在页面上所有DOMCSSJS、图片完全加载完毕之后触发。

    DOMContentLoaded事件在Overview上用一条蓝色竖线标记,并且在Summary蓝色文字显示确切的时间。

    Load事件同样会在OverviewRequestsTable上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。

    2.5 查看具体资源的详情

    通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

    1. Headers 该资源的HTTP头信息。
    2. Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
    3. Response 显示HTTP的Response信息。
    4. Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
    5. Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

    针对上面4Tab进行详细讲解一下各个功能:

    2.5.1 查看资源HTTP头信息

        在Headers标签里面可以看到HTTP   Request、URL、HTTP Method、Status Code、Remote Address 等基本信息和详细的Response HeadersRequestHeaders以及Query String Parameters或者FormData等信息。


    2.5.2 查看资源预览信息

    Preview标签里面可根据选择的资源类型(JSON、图片、文本、JSCSS)显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。


    2.5.3 查看资源HTTPResponse信息

    Response标签里面可根据选择的资源类型(JSON、图片、文本、JSCSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。


    2.5.4 查看资源Cookies信息

    如果选择的资源在RequestResponse过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。


    2.5.5 分析资源在请求的生命周期内各部分时间花费信息

    Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

    ·        Queuing :排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6.

    ·        Stalled :从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间。

    ·        Proxy Negotiation :与代理服务器连接的时间花费。

    ·        DNS Lookup :执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0

    ·        Initial Connection / Connecting :建立连接的时间花费,包含了TCP握手及重试时间。

    ·        SSL :完成SSL握手的时间花费。

    ·        Request sent :发起请求的时间。

    ·        Waiting (Time to first byte(TTFB)) :是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了。

    ·        Content Download 获取Response响应数据的时间花费。

    2.6 查看资源的发起者(请求源)和依赖项

    通过按住Shfit并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

    在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

    在该资源的下方标记为红色的资源是该资源的依赖资源。

     


    展开全文
  • 利用Chrome开发者工具功能进行网页整页截图的方法: 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧接着输入...

    利用Chrome开发者工具功能进行网页整页截图的方法:

    打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧接着输入指令 capture,它会提示有三个选项,如下图所示:

     

    转自:https://www.cnblogs.com/fger/p/10876392.html 

    展开全文
  • 简单介绍一下chrome的控制台,它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript、jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也...


    简单介绍一下chrome的控制台,它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript、jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也叫做抓包)。

    如何打开

    按F12或右键点击‘检查’可打开此工具。
    image.png

    Element面板

    该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到的链接等等。

    image.png

    1区:标签栏
    2区:界面展示的DOM树结构
    3区:展示样式与盒子模型
    4区:扩展功能

    1 元素选择

    快捷键:ctrl+shift+c
    小箭头用来选择本页面的元素,选中之后在2区的DOM树中也有所体现,这时候3区所有的标签所针对的对象都是该选中目标。
    image.png

    2 设备选择模式

    快捷键:ctrl+shift+m
    点击1就进入设备选择模式。这对于我们在做手机的适配的时候非常有用。可以在2选择设备,3展示的是设备的原始尺寸,4可以调整显示设备的大小。
    image.png

    3 主菜单

    主菜单中可以根据自己的喜好来配置开发者工具。任意的增删工作面板,设置外观属性,甚至是增加新的适配设备,搜索文件中的元素都可以在主菜单中进行。
    image.png

    4 元素面板

    可以直接对元素进行增删改。选中元素右键,有很多选项可以选择。或者直接双击修改。但是在刷新页面后,恢复原样,更改不会影响源文件的内容。
    image.png

    5 样式调整的CSS预处理器

    1. Style css的预处理器,可见既可得。直接更改css样式在界面中可以直观的看到效果。点击具体位置之后,跳转到Sources位置,这个不影响源文件。
      image.png

    2. Computed 选中的元素盒子模型样式属性的具体计算值
      image.png

    3. Event Listeners 元素绑定的事件
      image.png

    Console面板

    控制台输出日志
    通过JS代码或者命令行console.log()、console.warn()和console.error()可以将日志信息输出到控制台。
    image.png
    console.log 显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
    console.warn 显示带有黄色小图标的警告信息
    console.error 显示带有红色小图标的红色的错误信息

    注: 当需要换到下一行而不是回车的时候,请按Shift+Enter。

    控制台交互
    JS表达式计算
    image.png
    可以在控制台输入JS表达式点击Enter即可得到表达式的值。

    选择元素
    image.png

    快捷方式描述
    $()返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()
    $$()返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
    $x()返回与指定的XPath相匹配的所有元素的数组

    image.png

    Sources面板

    Sources面板几乎是我最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已。
    image.png
    Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。
    首先我们来看区域1,它的功能有些类似于Resources面板,主要是显示网页加载的脚本文件:例如css, js等资源文件(它不包含cookie,img等静态资源文件)。
    image.png
    区域1的导航条上有三个tab切换选项,他们都存有不同域名和环境下的js和css文件,我们首先来说明Sources(资源)选项的作用:
    Sources: 包含该项目的静态资源文件。双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令:
    image.png
    从上图可以看到js执行到断点处时各个区域的变化,首先是区域3中的Breakpoints记录信息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息,这样,我可以很直观地知道,此时此刻js的执行状态。同样的,你可以把鼠标放到区域2种的某个变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有信息:
    image.png
    然后,你可以按F10跟着js执行的路径一步一步地走下去,如果你遇到了一个函数包含着另外一个函数,那么你可以按F11进入到这个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键,故名思义,因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。
    image.png
    在上图蓝色圆圈中数字,它们分别代表:

    1、停止断点调试

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

    3、跳入函数中去(F11)

    4、从执行的函数中跳出

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

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

    为了避免你的调试代码重复执行,我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息(推荐这样做)。为了验证我们在console面板中拥有的是当前断点环境,我门可以对比断点执行前后的this值变化。
    image.png
    image.png
    在断点调试的时候,区域2中会自动显示每个变量的值,每次代码往下走的时候这个值都会实时更新。这让开发者对当前环境变量几乎可以说是一目了然。
    image.png
    当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,在Chrome里面,只需要在区域2种直接修改,你就可以验证你的代码在线上是否可行。
    image.png
    image.png
    即使在断点时,你也可以编辑代码,按ctrl+S保存之后,你会看到区域2的背景由白色变为浅色,而断点会重新开始执行。

    回到区域1,Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的,实际上它的作用很少。在里面我们可以编辑界面的css代码并且即时看到它们的映射效果,同样地,在Sinppets中,我们也可以编辑(重写)js代码片段。这些片段实际上就相当于你的js文件一样,不同的是本地的js文件在编辑器里面编辑的,而此处,你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失,也不会执行,除非是你手动执行它。它可以存在你的本地浏览器中,即使关闭浏览器,再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷,你知道,如果你在编辑器上编写这些代码,在发布时你必须为它们添加注释符号或者手动删除它们,而在浏览器上编写就不需要这样繁琐了。

    在Snippets选项的空白处右键后选择弹出的new选项,建立一个你自己的新的文件,然后在区域2种编辑它。
    image.png
    Snippets 的非常功能强大,它的许多隐藏功能还有待发掘。目前使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。

    Network面板

    Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。
    image.png
    从左往右依次介绍:
    image.png记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
    image.png清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)
    ![image.png](https://oss-emcsprod-public.modb.pro/image/editor/20210519-4ef2f9f3-88aa-4a97-
    image.png过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。
    image.png

    也可以是一些指定条件:

    domain:资源所在的域,即url中的域名部分。如 domain:api.github.com

    has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin

    is:当前时间点在执行的请求。当前可用值:running

    larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

    method:使用何种HTTP请求方式。如 GET

    mime-type:也写作content-type,是资源类型的标识符。如 text/html

    scheme:协议规定。如 HTTPS

    set-cookie-name:服务器设置的cookies名称

    set-cookie-value:服务器设置的cookies的值

    set-cookie-domain:服务器设置的cookies的域

    status-code:HTTP响应头的状态码
    image.png是否保留日志
    当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空。
    Name/Pat:资源名称以及URL路径 (main.css)

    Method:Http请求方法 (GET或者POST)

    status/Text:Http状态码/文字解释 (200,ok)

    Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)

    Initiator:解释请求是怎么发起的,有四种可能的值

    1.Parser :请求是由页面的html解析时发送

    2.Redirect:请求是由页面重定向发送

    3.script :请求是由script脚本处理发送

    4.other :请求是由其他过程发送的,比如页面里的Link链接点击

    size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

    请求文件具体说明
    点击某个具体请求后的界面,如下图所示:
    image.png
    一共分为四个模块:

    Headers
    image.png
    Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

    Preview:预览面板,用于资源的预览。
    image.png
    Response:响应信息面板包含资源还未进行格式处理的内容
    image.png
    Timing:资源请求的详细信息花费时间
    image.png

    展开全文
  • 前端-chromeF12 谷歌开发者工具详解 Network篇

    万次阅读 多人点赞 2018-02-10 12:20:04
    原文链接:https://segmentfault.com/a/1190000010302235开发者工具初步介绍chrome开发者工具最常用的四个功能模块:Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。...

    原文链接:https://segmentfault.com/a/1190000010302235

    开发者工具初步介绍

    chrome开发者工具最常用的四个功能模块:

    • Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。大大方便了开发者调试页面,这真是十分友好的~

    • console:这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~

    • Sources:主要用来调试js和查看源代码

    • Network:重头戏来了~

    Network详细介绍


    那我就按照从左到右的顺序来写啦~

    • 记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。

    • 清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)

    • 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。


    过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。


    也可以是一些指定条件
    指定条件有哪些?

    domain:资源所在的域,即url中的域名部分。如 domain:api.github.com

    has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin

    is:当前时间点在执行的请求。当前可用值:running

    larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

    method:使用何种HTTP请求方式。如 GET

    mime-type:也写作content-type,是资源类型的标识符。如 text/html

    scheme:协议规定。如 HTTPS

    set-cookie-name:服务器设置的cookies名称

    set-cookie-value:服务器设置的cookies的值

    set-cookie-domain:服务器设置的cookies的域

    status-code:HTTP响应头的状态码

    • 显示详细信息


    显示时间流

    • 是否保留日志 
      当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空的哟~

    • 是否进行缓存

      当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。

    • 设置模拟限速,如下图所示。

      设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

    Network主题内容介绍

    下列介绍中,前者为名词解释,后者为举例

    • Name/Pat:资源名称以及URL路径 (main.css)

    • Method:Http请求方法 (GET或者POST)

    • status/Text:Http状态码/文字解释 (200,ok)

    • Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)

    • Initiator:解释请求是怎么发起的,有四种可能的值

             1.Parser  :请求是由页面的html解析时发送
             2.Redirect:请求是由页面重定向发送
             3.script  :请求是由script脚本处理发送
             4.other   :请求是由其他过程发送的,比如页面里的Link链接点击
      
    • size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

    请求文件具体说明

    点击某个具体请求后的界面,如下图所示:



    一共分为四个模块:

    • Headers


    Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

    • Preview:预览面板,用于资源的预览。

    Response:响应信息面板包含资源还未进行格式处理的内容



    Timing:资源请求的详细信息花费时间


    细节补充

    对某请求右键,出现页面如下图所示。




    • Copy Request Headers:复制HTTP请求头到系统剪贴板

    • Copy Response Headers:复制HTTP响应头到系统剪贴板

    • Copy Response:复制HTTP响应内容到系统剪贴板

    • Copy as
      cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库,用于配合url语法进行数据传输)

    • Copy All as HAR:将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

    • Save as HAR with Content:将资源的所有的网络信息保存到HAR文件中(.har文件)

    • Clear Browser Cache:清除浏览器缓存

    • Clear Browser Cookies:清除浏览器cookies

    • Open in Sources Panel:当前选中资源在Sources面板打开

    • Open Link in New Tab:在新tab打开资源链接

    • Copy Link Address:复制资源url到系统剪贴板


    展开全文
  • 开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。大大方便了开发者调试页面,这真是十分友好的~ ...
  • 在文章chrome浏览器F12 Network中Timing参数含义中介绍了network中的timing各属性的含义,一般API的请求中比较耗时的阶段在content download阶段, 在实际开发中,如果页面上刷新好久还没有数据,可以看一下是不是...
  • 本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率...
  • 参考文章 https://www.163.com/dy/article/GLRQONDF05371T7D.html
  • Console面板 控制台输出日志 通过JS代码或者命令行 console.log() ...并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。
  • 转载于:https://www.cnblogs.com/superAnny/p/7109734.html
  • 1、首先打开开发者工具 快捷键F12或ctrl + shift + i 2、进入设置界面 3、修改语言为中文后重启浏览器
  • Google Chrome开发者工具基本使用方法
  • 本文主要记录,vue开发者工具 vue-devtools的下载安装配置。 截止目前最新版本为5.3.x (githup) vue-devtools github 地址 由于谷歌官方下载需要翻墙,所以我们选择不去官网去下载,而是直接加载本地扩展程序 ...
  • Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工具基础功能和高级性能...
  • 谷歌Chrome浏览器开发者工具教程

    千次阅读 2018-06-09 18:39:35
    Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工...
  • 最近Chrome更新后提示是否将DevTool语言设为中文,设为中文后感觉不适应,又切回英文,但是有个UK、US英文,选了个UK,后面发现每次打开开发者工具都要卡几秒,很慢,最后才发现是语言设置问题,UK切换为US瞬间恢复...
  • 一、利用Chrome开发者工具功能进行网页整页截图的方法。 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具, 接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧...
  • Chrome开发者工具调试(Debug)入门

    千次阅读 2019-07-01 09:37:17
    本文针对一种特定类型的问题来演示如何使用谷歌开发者工具Debug,该方法同样适用于其它通用问题。。 第一步:复现BUG Debugging的第一步往往是复现bug。“复现BUG”是指找到一个行为序列可以100%触发bug。你需要...
  • https://developers.google.com/web/tools/chrome-devtools
  • 开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。大大方便了开发者调试页面,这真是十分友好的~ ...
  • 按住Ctrl键,然后滚动鼠标滚轮(即鼠标中键)。
  • ChromeF12 谷歌开发者工具详解 -Network

    千次阅读 多人点赞 2018-10-31 10:39:09
    关于F12开发者工具中Network模块,无论是开发代码调试,还是测试定位界面元素,定位问题等,使用的都比较频繁,我本人也是热衷于F12的使用,本篇文章便是结合自己使用的一些心得和网上的资料整理出来的(以百度首页...
  • javascript cpu分析器 7)Application面板:查看调试客户端存储,如cookie、LocalStorage、SessionStorage等 8)Security安全面板:查看页面安全及证书,辅助其他使用时可导出证书使用 9)Audits面板:使用Google ...
  • 谷歌开发者工具里面这个preserve log:保留请求日志, 跳转页面的时候勾选上,可以看到跳转前的请求,也可适用于chrome开发者工具抓包的问题
  • 浏览器最多6个线程 同时发送209个请求信息 Elements:查看网页源代码可以修改css样式 Console:记录开发的日志信息和报错信息方便开发者及时能发现错误地方在哪里,一般用console.log() 来打印调试信息,知道变量...
  • google开发者工具Application-----Cookies

    千次阅读 2017-11-02 18:36:45
    google开发者工具Application-----Cookies
  • Chrome开发者工具谷歌浏览器自带的一款开发者工具,它可以给开发者带来很大的便利。 主要作用有: 快速定位问题 查看站点页面加载信息 在线页面样式调整 前端代码调试 前端日志分析 浏览器存储查看 在线性能分析 ...
  • Chrome浏览器——开发者工具使用操作
  • 1.打开我们伟大的 IE 浏览器    2.直接打 谷歌浏览器 普通下载 直接安装即可 ... 3. 然后进行一些默认设置,因为有些小伙伴的谷歌...接下来开始打开谷歌新世界大门.哈哈哈.  (在百度界面 按下F12)   ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,411
精华内容 62,964
关键字:

谷歌开发者工具