开发者工具_开发者工具快捷键 - CSDN
精华内容
参与话题
  • Chrome的开发者工具详解

    千次阅读 2015-05-19 14:18:21
    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。...怎样打开Chrome的开发者工具? 直接在页面上点击右键,然后选择审查元

    本文章转siberiawolf0307http://segmentfault.com/a/1190000002439648

    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。
    下面整理一下如何使用Chrome进行调试。

    怎样打开Chrome的开发者工具?

    直接在页面上点击右键,然后选择审查元素:
    审查元素

    或者在Chrome的工具中找到:
    工具中找到

    或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12
    打开的开发者工具就长下面的样子:
    F12

    不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口
    独立窗口

    Elements标签页

    Elements标签页的左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性。
    Elements标签页

    1. Edit as HTML直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。
    2. Copy可以将HTML代码直接复制下来,在拷贝别人网站上面的HTML代码的时候灰常方便,你懂的~~
    3. Delete node删掉一个HTML Node
    4. Break on可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处

    Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
    CSS进行查看与编辑

    1. Style看HTML元素的样式
    2. Computed可以看元素的盒子模型
    3. Properties看到元素具有的方法与属性,比查API手册要方便得多

    Network标签页

    Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。
    Network标签页
    点击左侧某一个具体请求URL,可以看到该请求的详细HTTP请求情况:
    HTTP请求情况
    我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

    1. Headers请求头信息和响应头信息
    2. Preview预览结果,如果是文件可以查看这个文件;如果是图片可以预览这个图片;如果是从服务器返回来的JSON数据,可以查看格式话后的JSON
    3. Response从服务器返回的响应结果
    4. Cookies请求和响应的Cookie
    5. Timing具体的响应时间

    格式化JSON
    字符串JSON

    Sources标签页

    Sources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
    调试面板
    断点设置

    Timeline标签页

    注意这个Timeline的标签页不是指网络请求的时间响应情况,这个Timeline指的JS执行时间、页面元素渲染时间(每个信息都怎么看,我没弄懂..)
    Timeline标签页

    Profiles标签页

    主要是做性能优化的,包括查看CPU执行时间与内存占用(这个也没弄懂)
    Profiles1
    Profiles2

    Audits标签页

    这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)
    Audits1
    点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了
    Audits2

    Console标签页

    就是Javascript控制台了:
    Console.log
    在这个面板可以查看错误信息、打印调试信息(console.log())、写一些测试脚本,还可以当作Javascript API查看用。
    Console.log

    移动端开发调试

    现在新版chrome弹出控制台后如下图,其中的工具对移动端调试非常方便。
    Console.log
    在控制台中可以直接模拟手机、调整UA、修改网络连接状态
    Console.log

    说明

    官方帮助手册(需要翻墙)

    1. 编辑样式和DOM
    2. javascript 调试
    3. 移动端调试

    截图文字看不清问题

    现在部分截图看不清,请鼠标右键点击“在新标签页中打开图片”。以后会支持预览大图。
    文字看不清

    展开全文
  • Chrome开发者工具详解

    万次阅读 2018-06-15 10:52:51
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、...

    Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具面板

    面板上包含了Elements面板、Console面板、Sources面板、Network面板、
    Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

    这些按钮的功能点如下:

    • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
    • Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
    • Sources:断点调试JS。
    • Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
    • Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
    • Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
    • Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
    • Security:判断当前网页是否安全。
    • Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

      注: 这一篇主要讲解前三个面板Elements、Console、Sources

    Elements面板

    实时编辑DOM节点和CSS样式

    • 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面

    • 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图:

    • 点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(topbottomleftright) 就可以修改元素的paddingbordermargin属性值。

    • 查看网页的本地修改历史
    • 点击Styles面板中修改过属性的文件名,会跳转到Source面板
    • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
    • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

    Console面板

    控制台输出日志

    通过JS代码或者命令行console.log()console.warn()
    console.error()可以将日志信息输出到控制台

    • console.log 显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
    • console.warn 显示带有黄色小图标的警告信息
    • console.error 显示带有红色小图标红色的错误信息

    • console.assert 当第一个参数为false时,才会显示第一个参数的值

    • 可以根据JS条件判断输出不同的日志信息

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

    控制台交互

    • JS表达式计算

    在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab自动完成当前的建议项

    • 选择元素

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

    注: 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。

    Sources面板

    你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件。

    调试JS代码

    • 你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号{}来增强可读性,所有的断点都会列出右侧的断点区。

    • 设置断点

    断点可以在DOM元素节点发生改变时XHR生命周期状态改变时指定的事件执行时被触发

    ① DOM元素节点发生改变时

    Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...,可以看到三个选择项,比如我们选择Subtree modifications
    那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:

    下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div对话框供用户添加数据。

    ② XHR生命周期状态改变时

    当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。

    ③ 指定的事件执行时

    Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,
    在指定的事件执行时,断点就会有触发。

    Chrome开发者工具详解(2)-Network面板

    注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享

    Chrome开发者工具面板

    面板上包含了Elements面板、Console面板、Sources面板、Network面板、
    Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

    这些按钮的功能点如下:

    • Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
    • Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
    • Sources:断点调试JS。
    • Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
    • Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
    • Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
    • Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
    • Security:判断当前网页是否安全。
    • Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

    Network面板

    概述

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

    我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):

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

    其中 Requests Table 显示如下信息列:

    • Name 资源名称,点击名称可以查看资源的详情情况,包括HeadersPreviewResponseCookiesTiming
    • Status HTTP状态码。
    • Type 请求的资源MIME类型。
    • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    • Parser: 请求由Chrome的HTML解析器时发起的。
    • Redirect:请求是由HTTP页面重定向发起的。
    • Script:请求是由Script脚本发起的。
    • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
    • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
    • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
    • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

    捕获屏幕

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

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

    双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

    单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

    查看DOMContentLoaded和load事件信息

    DOMContentLoadedload这两个事件会高亮显示。

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

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

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

    查看具体资源的详情

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

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

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

    ① 查看资源HTTP头信息

    Headers标签里面可以看到HTTP Request URLHTTP MethodStatus CodeRemote Address等基本信息和详细的Response Headers
    Request Headers以及Query String Parameters或者Form Data等信息。

    ② 查看资源预览信息

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

    ③ 查看资源HTTP的Response信息

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

    ④ 查看资源Cookies信息

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

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

    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请求时间和获得响应消息第一个字节的时间。
    • Content Download 获取Response响应数据的时间花费。

    TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了,可以参见网络性能优化方案及里面的相关参考文档。

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

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

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

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

    参考资料

    Chrome开发者工具详解(3)-Timeline面板

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。

    注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。

    Timeline面板

    Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
    你可以充分利用这个面板来分析你的网页的程序性能问题。

    概述

    下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):

    1. Controls 录制开关和控制录制过程中需要记录哪些信息。
    2. Overview 网页性能的概要信息。
    3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
    4. Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

    Flame Chart里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。

    其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息。

    可以通过键盘上的W,S来放大和缩小指定区域,通过A,D来向左或向右移动指定区域。

    从Google把图贴到这里,这个窗格包含了三个图表:

    1. FPS 每秒帧数(Frames Per Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
    2. CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。
    3. NET 各种颜色的柱状条分别显示一种资源。柱状条越长,代表获取这个资源的时间越长。

    CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表其它杂项文件。

    NET图表柱状条两种颜色的含义:较亮的部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

    网页录制详情

    支持两种网页录制操作:①录制网页加载,②录制网页交互。为了便于分析,录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

    当录制完成后,在Flame Chart(火焰图)中点击左侧三角可以展开详情,点击其中的事件或者空白处,可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大,限于篇幅原因,下次有机会再作深入介绍,或者直接到Google上查看Timeline Event Reference这个参考文档。

    录制中进行JS分析

    在录制之前点击Controls中的JS Profile复选框,可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗),并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

    录制中捕获截屏

    在录制之前点击Controls中的Screenshots复选框,可以在录制过程中捕获截屏,鼠标在Overview上从左向右移动则可以看到录制的动画。

    绘制解析

    在录制之前点击Controls中的Paint复选框,可以获取绘制事件的更多细节信息(注意这会产生很多的性能消耗)。如果要深入了解网页渲染方面的信息,可以点击DevTools右上角的菜单,在More tools里面选中Rendering settings,这里面包含了如下设置项:

    • Paint Flashing 高亮显示网页中需要被重绘的部分。
    • Layer Borders 显示Layer边界。
    • FPS Meter 每一秒的帧细节,帧速率的分布信息和GPU的内存使用情况。
    • Scrolling Performance Issues 分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。
    • Emulate CSS Media 仿真CSS媒体类型,查看不同的设备上CSS样式效果,可能的媒体类型选项有printscreen

    把上面的所有设置项勾选上,网页的显示效果如下:

    查询指定事件

    你可以通过在DevTools上按Cmd+F(Mac)调出查询框,来查看指定时间区域范围内的指定类型的事件,点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。

    图中查询到了4个红色标记着的Parse HTML事件,点击Cmd+G焦点会在这4个事件移动。

    运行时性能分析

    上面大致介绍了Timeline面板上的各个功能菜单,那么如何去利用该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在这边展开讨论,感兴趣的读者直接到Google开发者文档上查看,Google开发者文档有最权威最新的信息。

    参考文档

    Chrome开发者工具详解(4)-Profiles面板

    如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一步提升程序的JavaScript执行性能

    概述

    当前使用的Chrome最新版为54.0.2840.71,这个版本的Profiles面板比之前提供的功能更多也更强大,下面是该面板所包含的功能点:

    • Record JavaScript CPU Profile 用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。
    • Take Heap Snapshot 创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。
    • Record Allocation Timeline 从整个Heap角度记录内存的分配信息的时间轴信息,利用这个可以实现隔离内存泄漏问题。
    • Record Allocation Profile 从JS函数角度记录内存的分配信息。

    Record JavaScript CPU Profile简介

    通过选择Record JavaScript CPU Profile,然后点击Start,结合你所要分析的具体场景,你可以重新加载网页,或者在网页上进行交互,甚至什么都不操作。最后点击Stop,完成记录操作。

    有三种不同的视图可供选择:

    • Chart 按时间先后顺序显示的火焰图。

    • Heavy(Bottom Up) (自底向上)根据对性能的消耗影响列出所有的函数,并可以查看该函数的调用路径。

    • Tree(Top Down) (自顶向下) 从调用栈的顶端(最初调用的位置)开始,显示调用结构的总体的树状图情况。

    我们以Chart视图为例分析一下JS的执行的性能情况:

    该视图会以时间顺序展示CPU的性能情况,视图主要分成两块:

    • Overview 整个录制结果的鸟瞰图(概览),柱形条的高度对应了调用堆栈的深度,也就是说柱形条高度越高,调用堆栈的深度越深。
    • Call Stacks 在录制过程中被调用的函数的深入分析视图(调用堆栈),横轴表示时间,纵轴表示调用栈,自上而下的表示函数的调用情况。也就是说上面的函数调用在它下面的函数。

    视图中的函数颜色不同于其它的面板,这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。

    其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深,不表示其重要性很高,但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成,那么你就考虑去做一些优化操作,具体可以参见网络性能优化方案及里面的相关参考文档。

    将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据,会提供如下信息:

    • Name 函数名称
    • Self time 函数的本次调用运行的时间,仅仅包含该函数本身的运行时间,不包含它所调用的子函数的时间。
    • Total time 函数的本次调用运行的总时间,包含它所调用的子函数的运行时间。
    • URL 函数定义在文件中所在的位置,其格式为file.js:100,表示函数在file.js文件中的第100行。
    • Aggregated self time 在这次的录制过程中函数调用运行的总时间,不包含它所调用的子函数的时间。
    • Aggregated total time 在这次的录制过程中所有的函数调用运行的总时间,包含它所调用的子函数的时间。
    • Not optimized 如果优化器检测到该函数有潜在的优化空间,那么该函数会被列在这里。

    Take Heap Snapshot简介

    通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照,在每一次获取快照前都会自动执行垃圾回收操作。

    快照最初会存储在渲染进程的内存之中,当我们点击创建快照按钮来查看时才会被传输到DevTools中,当快照被加载到DevTools里面并经过解析之后,在快照标题下方的文字显示是数字就是可访问到的JS对象总的大小。

    堆快照提供了不同的视角来进行查看:

    • Summary 该视图按照构造函数进行分组,用它可以捕获对象和它们使用的内存情况,对于跟踪定位DOM节点的内存泄漏特别有用。
    • Comparison 对比两个快照的差别,用它可以对比某个操作前后的内存快照。分析操作前后的内存释放情况以及它的引用计数,便于你确认内存是否存在泄漏以及造成的原因。
    • Containment 该视图可以探测堆的具体内容,它提供了一个更适合的视图来查看对象结构,有助于分析对象的引用情况,使用它可以分析闭包和进行更深层次的对象分析。
    • Statistics 统计视图。

    Summary视图

    该视图会显示所有的对象信息,点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。

    图中的各列的具体含义如下:

    • Constructor 显示所有的构造函数,点击每一个构造函数可以查看由该构造函数创建的所有对象。
    • Distance 显示通过最短的节点路径到根节点的距离。
    • Objects Count 显示对象的个数和百分比。
    • Shallow size 显示由特定的构造函数创建的所有对象的本身的内存总数。
    • Retained size 显示由该对象及其它所引用的对象的总的内存总数。

    Shallow sizeRetained size的区别?Shallow size是对象本身占用内存的大小,不包含它所引用的对象。Retained size是该对象本身的Shallow size,加上能从该对象直接或者间接访问到对象的Shallow size之和。也就是说Retained size是该对象被GC之后所能回收到内存的总和。

    在展开构造函数,则会列出该函数相关的所有对象实例,可以查看该对象的Shallow size和Retained size,在@符号后面的数字是该对象的唯一标识ID

    其中黄色的对象表示在它被某个JS所引用,而红色的对象表示由黄色背景色引用被分离开出的节点。

    这些构造函数都代表什么含义呢?

    • (global property) 全局对象(比如window)和通过它引用的对象之间的中间对象,如果一个对象是由Person构造函数生成并被全局对象所引用,那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比,采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的,而非全局变量的属性访问最优化方案对全局变量是不适用的。
    • (roots) 它们可以是由引擎自己的目标创建的一些引用,这个引擎可以缓存引用的对象,但所有的这些引用都是弱引用,它们不会阻止引用对象被回收。
    • (closure) 一些函数闭包中的一组对象的引用。
    • (array, string, number, regexp) 一系属性引用了数组(Array),字符串(String),数字(Number)或正则表达式的对象类型。
    • HTMLDivElement, HTMLAnchorElement, DocumentFragment等 你的代码中对元素(elements)的引用或者指定的document对象的引用。

    Comparison视图

    通过比较多个快照之间的差异来找出内存泄露的对象,为了验证某个程序的操作不会引起内存泄露(通常会执行一个操作后再执行一个对应的相反操作,比如打开一个文档后再关闭它,应该是没有产生内存泄露问题的),你可以执行如下步骤:

    1. 在执行一个操作之前拍一个快照。
    2. 执行一个操作,通过你认为可能会引起内存泄露的一次页面交互操作。
    3. 执行一个相反的操作。
    4. 拍第二个快照,切换到Comparison视图,并与第一个快照进行对比。

    切换到Comparison视图之后,就可以看到两个不同的快照之间的差别。

    Containment视图

    该视图本质上就是应用程序的对象结构的“鸟瞰图”,允许你去深入分析函数的闭包,了解应用程序底层的内存使用情况。

    这个视图提供了多个入口:

    • DOMWindow objects DOMWindow对象,即JS代码全局对象。
    • Native objects 浏览器原生对象,比如DOM节点,CSS规则。

    闭包小建议: 在快照的分析中命名函数的闭包相比匿名函数的闭包更容易区分。

    Google上提供的例子和图如下:

    function createLargeClosure() {
      var largeStr = new Array(1000000).join('x');
    
      var lC = function() { // 匿名函数
        return largeStr;
      };
    
      return lC;
    }
    function createLargeClosure() {
      var largeStr = new Array(1000000).join('x');
    
      var lC = function lC() { // 命名函数
        return largeStr;
      };
    
      return lC;
    }

    Statistics视图

    该视图是堆快照的总的分布统计情况,这个直接上图就可以了:

    内存泄露示例

    还是把Google提供的内存泄露的小例子贴出来:

    DOM内存泄露可能比你想象的要大,考虑一下下面的例子-什么时候#tree节点被释放掉?

      var select = document.querySelector;
      var treeRef = select("#tree");
      var leafRef = select("#leaf");
      var body = select("body");
    
      body.removeChild(treeRef);
    
      //由于treeRef #tree不能被释放
      treeRef = null;
    
      //由于leafRef的间接引用 #tree还是不能被释放
    
      leafRef = null;
      //现在没有被引用,#tree这个时候才可以被释放了

    #leaf节点保持着对它的父节点(parentNode)的引用,这样一直递归引用了#tree节点,所以只有当leafRef被设置成null后,#tree下面的整个树节点才有可能被垃圾回收器回收。

    Record Allocation Timeline简介

    该工具是可以帮助你追踪JS堆里面的内存泄漏的另一大利器。

    选中Record Allocation Timeline按钮,点击Start按钮之后,执行你认为可能会引起内存泄漏的操作,操作之后点击左上角的停止按钮即可。你可以在蓝色竖线上通过缩放来过滤构造器窗格来仅仅显示在指定的时间帧内的被分配的对象。

    录制过程中,在时间线上会出现一些蓝色竖条,这些蓝色竖条代表一个新的内存分配,这个新的内存分配都可以会有潜在的内存泄露问题。

    通过展开对象并点击它的值则可以在Object窗格中查看更多新分配的对象细节。

    Record Allocation Profile简介

    从JS函数角度记录并查看内存的分配信息。点击Start按钮,执行你想要去深入分析的页面操作,当你完成你的操作后点击Stop按钮。然后会显示一个按JS函数进行内存分配的分解图,默认的视图是Heavy (Bottom Up),该视图会把最消耗内存的函数显示在最顶端。

    下图是切换到Chart视图时具体的界面,点击任意函数跳转到Sources面板可以查看具体的函数信息。

    参考文档

    Chrome开发者工具详解(5)-Application、Security、Audits面板

    这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Application面板、Security面板、Audits面板的基本功能:

    Application面板简介

    该面板主要是记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。

    这个面板跟前前面几道硬菜(Network面板Timeline面板Profiles面板)比起来简单多了,这里就稍微作一下介绍:

    • Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
    • Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
    • Frames 将页面上的资源按frame类别进行组织显示。

    Frames窗格

    在上图中可以查看到顶级的top是一个主文档,在top下面是主文档的FontsImagesScriptsStylesheets等资源。最后一个就是主文件自身。

    在资源上右击后在弹出菜单选择Reveal in Network Panel,就会跳转到Network面板并定位到该资源的位置。


    你也可以在Sources面板里面按frame类别来查看资源信息。

    Security面板简介

    通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

    HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。

    HTTPS和HTTP的区别主要为以下四点:
    ① https协议需要到CA申请证书,一般免费证书很少,需要交费。
    ② http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
    ③ http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
    ④ http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

    如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).

    通过点击View certificate可以查看main origin的服务器证书信息。
    点击左侧可以查看指定源的连接和证书详情。

    如果网页是不安全的,则会显示:This page is not secure.

    该面板可以区分两种类型的不安全的页面:

    • 如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。
    • 如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击

    点击左侧则提供一个跳转到Network面板视图的链接信息。

    中间人攻击(Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间,这台计算机就称为“中间人”。

    Audits面板简介

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

    选中Network UtilizationWeb Page Performance,点击Run按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议。


    转自:

    http://www.cnblogs.com/charliechu/p/6021141.html

    http://zhuchenglin.me/


    Chrome Developer Tools 中的 Preview 不显示 HTML 的问题:

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing

    https://bugs.chromium.org/p/chromium/issues/detail?id=785050

    https://groups.google.com/forum/#!topic/google-chrome-developer-tools/6btEa32ISEA

    https://developers.google.com/web/updates/2018/02/devtools#pretty-printing




    展开全文
  • 百度开发者工具

    2019-02-18 12:24:52
    百度开发者工具..
  • 浏览器开发者工具基本使用教程

    万次阅读 2018-05-30 16:50:22
    在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。浏览器开发者工具到底是什么?其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,当然只要你有...



    在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。

    浏览器开发者工具到底是什么?

    其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,当然只要你有兴趣想要了解,只要你对这个世界充满这好奇,什么东西你都可以了解。

    开发者工具到底有什么用?

    它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript、jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也叫做抓包),抓包是非常有意思的过程,而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏,也就是功能上的差别,那么这个时候你就找一个最适合自己的浏览器使用就可以,接下来就是介绍我常用的三个浏览器。

    一、谷歌浏览器chrom

    一般在windows系统上浏览器开发者工具打开都是按F12快捷键,但是今天我是用mac进行讲解的。

    屏幕快照 2016-08-13 下午11.01.39

    那么上面的这张图就是打开chrom浏览器工具的方式,也可以通过快捷键打开

    element页面

    上面这张图就是打开chrom开发者工具之后的样子,现在简单的介绍:

    第一个框:是用于屏幕适配的,也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。

    屏幕快照 2016-08-13 下午11.14.56

    上面这张图就是点击之后的效果,用于移动设备屏幕适配的功能

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

    console标签:这个就是一个web控制台

    sources标签:这个是显示资源文件的

    sources

    1.该选择框使用来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
    2.这个地方使用来调试js代码的地方,这个非常重要,看到行号上面有蓝色的标签,这个标签就是断电,当我们需要调试程序的时候打一个断电,然后通过3这个工具栏进行调试,那么调试过程就不详细解释,也就是打一个断电然后刷新页面程序会调到你打断点的地方,然后通过4来查看程序中变量的值什么的。
    3.中的标签,第一个是停止状态的按钮就是表示程序是否停止(在debug时),后面的是程序继续跳过方法,跳过下一个语句,调到上一个语句。

    Network标签:这个就是抓包常用的工具

    屏幕快照 2016-08-13 下午11.33.24

    那么这个页面就是用于抓包的页面,我们需要分析页面的请求,比如模拟登陆什么的都需要去分析程序是怎么在后台执行的,接下来就,我们可以看到Headers(请求消息头) Preview(预览) Response(响应) Timing(求求时间)Cookie这些东西

    最上面还有一个工具栏,有一个红色的圆点静止符号的按钮,那么这两个按钮,当为红色按钮的时候表示当前的请求不被清空(但是这里的请求是不跳转页面的请求,当跳转到新的页面,那么也会请求也会被清空),后面这个按钮就是清空请求的。

    下面还有一行工具栏,这个工具栏主要是用来选择和过滤请求消息的。

    再下面可以看到时间线,这个就是记录一个请求开始到结束的时间。

    注意:当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log,同时让红色按钮显示红色

    TimeLiness标签:这个就是我们上面讲的请求时间

    那么后面的几个标签也不是很常用,我就不做过多的说明,现在简单的了解这些基本的入门使用知识就基本够用,我相信这些功能都用熟之后你也会知道其他的功能的。

    二、火狐浏览器FireFox

    通过谷歌浏览器的认识那么我们就很简单的使用火狐咯,其实在mac上我是非常喜欢火狐的,因为功能是非常的强大。

    现在只讲火狐和谷歌浏览器的区别:

    屏幕快照 2016-08-13 下午11.52.17

    火狐浏览器的打开方式,这里我们选择Web控制台,当然你可以打开没一个试试,试试总是没有错的对吧,我不经意的打开了WebIDE简直就是惊呆我了,这个直接就是一个写前端的神奇没有什么好说的咯。你也可以打开试试,每一个都可以试试,这些功能真的很强大。

    当打开之后,我们会发现,火狐真的给人眼前一亮的赶脚

    屏幕快照 2016-08-13 下午11.54.04

    看吧,是不是有一种眼前一亮的赶脚,反正我是有的(当然了你第一次打开的话坑定和我的不一样了,我这个是设置主题之后的效果,你也可以去设置咯)

    看看,和chrom没有什么不同吧,都是那几个,而且人家是中文的,对一些看到English就发晕的同学简直是不能太有爱

    功能上没什么区别,但是在我抓包的过程中发现,火狐抓包的能力真的强,我自己开始是用谷歌现在我选择使用火狐更多

    那么就简单的介绍不同的地方

    火狐

    大家可以看上图,我觉得这个就是我不用深入研究就能知道的最大区别啦:

    1、看到没有,这里列出的消息头 Cookie 响应什么的一个都不少,而且人家多了参数 安全性
    参数这个就不用多说了,在我们抓包分析的过程中参数绝对是非常重要的内容,所以能够直接给你展示出来,可以给你减少去分析参数的过程,那么安全性呢,不言而喻了吧。

    2、我们再来看,编辑和重发 原始头 能够模拟请求,简直碉堡啦,有没有,喜欢到爆,谷歌当然也可以有,但是好像是要装插件的。

    好啦,还有很多不同,但是我说啦,只要你掌握了上面所讲的这些东西,我相信你去研究其他的功能都会是小菜一碟咯。

    那么我们来看看设置里面给我们提供了那些自定义功能,这个也是非常强大的功能哦

    火狐设置

    当点击图中1按钮(设置按钮)后将出现一个神奇的地方,就是这里面,这里面也有很多功能啦,可以一个一个勾选上去体验吧孩子。

    注意:看到图中2没有,这个勾选上有什么作用,和Chrom中的Preserve log是一个作用,当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空,勾选上了那么就不会被清空,这样更加有力你分析问题咯。

    三、Safari浏览器

    Safari的开发者工具呢也很不错,但是从功能上我觉得是不能够满足我内心强大欲望的,so,我一般上网用Safari,开发调试用上面两种,上网用Safari真的是方便而且简洁。

    好了简单的放上几张图让大家感受吧:

    屏幕快照 2016-08-14 上午12.18.32

    这个呢就是打开Safari开发者工具的方式,在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯

    屏幕快照 2016-08-14 上午12.21.45

    上面是打开网络这个标签的,我们可以看到该有的功能是一个都没少,而且我觉得非常简洁,说真的我如果不是一个开发者,我会爱死这样的一个浏览器,简洁大方,并且用户体验非常好,没有杂七杂八的功能。
    想起一句话:好的产品不是还能不能扩展,而是做到没有办法再精简。

    屏幕快照 2016-08-14 上午12.21.53

    看吧这就是调试代码的地方,功能上没有什么不同,但是感觉很规范,很简洁,很友好。

    如果你是入门,我相信这些已经够啦,当你熟练运用了这些功能之后我相信你自己去研究就非常容易啦

    记录学习的每一步,记录每一次的成长!!!!

    展开全文
  • 不同浏览器上的开发者工具

    千次阅读 2017-11-30 10:47:33
    不同浏览器上的开发者工具 你是否知道每个现代浏览器都有自己的开发者工具? 如果你不知道,那很好。要想在浏览器中找到开发者工具,并不十分容易。因此,我们决定通过这个开发者工具指南来帮助你! Google ...

    不同浏览器上的开发者工具

    你是否知道每个现代浏览器都有自己的开发者工具?

    如果你不知道,那很好。要想在浏览器中找到开发者工具,并不十分容易。因此,我们决定通过这个开发者工具指南来帮助你!

    Google Chrome

    Chrome 开发者工具是 Google Chrome 中内置的网页编辑和调试工具。使用开发者工具迭代、调试和简要介绍站点。要学习更多内容,单击此处|国内 翻译文档

    要打开 Chrome 开发者工具,右键单击任意页面元素,并选择“检查 (Inspect)”,或者打开浏览器窗口右上角的 Chrome 菜单并选择“更多工具 (More Tools)” >“开发者工具 (Developer Tools)”。或者你可以使用快捷方式 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

    Mozilla Firefox

    Firefox 开发者工具让你可以在台式机和手机上检查、编辑及调试 HTML、CSS 和 JavaScript。你也可以下载 Firefox Developer Edition 版的 Firefox,它专为开发者定制,具有最新的 Firefox 功能和开发者试验工具。要学习更多内容,单击此处

    要打开 Firefox 开发者工具,右键单击任意页面 元素并选择“检查元素 (Inspect Element)”,或者打开浏览器窗口右上角的 Firefox 菜单并选择“开发者 (Developer)”。 或者,你可以使用快捷方式 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

    Internet Explorer

    对于 Windows 用户,如果你仍在使用 Internet Explorer 的版本, 则可通过按 F12 来 访问 F12 开发者工具。版本之间的功能各不相同, 但从 Internet Explorer 8 开始,各功能变化不大。下面,我们已经链接到每个版本的文档,但是如果你已经升级到 Microsoft Edge,请查阅下一部分。

    Microsoft Edge

    Microsoft Edge 为 Internet Explorer 中的 F12 开发者工具引入了新的巨大改进。新工具内置于 TypeScript 之中,且始终处于运行状态,所以不需要重新加载。另外,GitHub 上当前提供了 F12 开发者工具文档。要学习更多内容,单击此处

    如同 Internet Explorer,要在 Microsoft Edge 中打开开发者工具,只需按 F12

    Safari

    对于 Mac 用户,Safari 自带有 Web Inspector,这是一个强大的工具,能够轻松地修改、调试和优化网站,以便在两个平台上同时获得最佳的性能和兼容性。要学习更多内容,单击此处

    要访问 Safari 的网页开发工具,请在 Safari 的高级首选项中启用“开发 (Develop)”菜单。启用后,可右键单击任意页面元素并选择“检查元素 (Inspect Element)”以打开 Web 开发工具,或者使用快捷方式 ⌘ + ⌥ + I

    Opera

    Opera 快速、小巧且功能强大,预先包装了一套功能齐全的开发者工具。此工具包名为 Opera Dragonfly,旨在让你的工作变得更加轻松。要学习更多内容,单击此处

    通过按 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux) 来启动 Opera Dragonfly。或者,你可以通过在页面中右键单击并选择“检查元素 (Inspect Element)”来锁定特定的元素。

    展开全文
  • Google开发者工具面板-network详解

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

    2019-10-08 06:58:28
    版本管理工具 git 开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理,创建分支和合并分支异常简单、方便 https://git-scm.com/ ...非常不建议使用svn作为版本管理工具,无论是版本...
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。...chrome 开发者工具 当我们爬取不同的网站时,每个网站页面的实现方式各不相同,我们需要对每个网站都
  • 微信公众号之开发者工具

    万次阅读 2018-06-30 00:32:11
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • 如何使用浏览器的F12开发者工具调试页面?

    万次阅读 多人点赞 2018-05-27 22:25:23
    通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的...
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信小程序账号的注册、登录、appid的获取 03-微信小程序开发和公众号开发模式的切换 ...
  • Chrome 开发者工具官方中文文档

    千次阅读 2018-11-07 12:03:25
    传送门 Chrome开发者工具官方中文文档 front-end-study系列
  • 你不知道的,F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择:hov 在下方选择元素的状态即可) 方式二 (在elments中选中节点然后右键选中元素前状态,点击后 节点前就会出现一个橘色小球,然后在右侧就可以...
  • 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js...
  • 问题名称:开发者工具提示代理不安全 问题描述:点击确认或者取消均无效 适用范围:开发者工具 1.02.19版本及以下 以上版本可以尝试试试 问题的原因: 首先这个问题是微信开发者工具代理的使用问题,我们要着手通过...
  • 在某个网站上,分析页面以及抓取数据,我用得最多的工具是 Chrome 开发者工具。 Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。因为国内很多浏览器...
  • WEB浏览器中开发者工具的几个技巧

    千次阅读 2018-12-25 18:11:15
    浏览器的开发者工具 在浏览器的正文中点右键,或者在浏览器的菜单里面,更多工具,可以很容易的找到开发者工具,当然,你也可以使用F12直接调出这个工具组。 什么是开发者工具 用来调试HTML,js等web内容的工具,...
1 2 3 4 5 ... 20
收藏数 561,927
精华内容 224,770
关键字:

开发者工具