chrome调试_chrome调试安卓 - CSDN
精华内容
参与话题
  • 原文出处: Cayley的编程之路  引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,...

    原文出处: Cayley的编程之路   

    引言

    “工欲善其事,必先利其器”

    没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,写了很多代码,能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和深入,说说本姑娘吧,我的编程调试起源于自学滴前端课程,因为学习的时候看的都是基础的教学视频,对于调试也只是掌握了alert和console, 请大家别笑话,认真看完再说话,试问谁当初入门时候不是走的这条路呢,当你不再限于做静态页面,古老而经典的调试方式肯定不能帮你完成日常调试,日后我进入到了大公司去实习,才真正开始接触专业开发业务,开始跟着师兄和师傅一起上路,那时我才有了“js断点调试“的意识,开始一步步调试我的js代码~


    下面总结一下一些常用调试方法,这些方法能让开发的工作顺利并且高效,这里小女子拿出来总结一下,与各位程序猿同仁分享一下 ~ (此处应有掌声…… ^_^)

    一. 先来认识一下这些按钮

    先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看

    1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

    2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择

    可选择的适配

    3.Elements 功能标签页:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息,下图我们可以看到当我鼠标选择id 为lg_tar的div元素时,右侧的css样式对应的会展示出此id 的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效, 灰色的element.style样式同样可以进行添加和书写,唯一的区别是,在这里添加的样式是添加到了该元素内部,实现方式即:该div元素的style属性,这个页面的功能很强大,在我们做了相关的页面后,修改样式是一块很重要的工作,细微的差距都需要调整,但是不可能说做到每修改一点即编译一遍代码,再刷新浏览器查看效果,这样很低效,一次性在浏览器中修改之后,再到代码中进行修改

    • 对应的样式

    • 盒模型信息

    同时,当我们浏览网站看到某些特别炫酷的效果和难做的样式时候,打开这个功能,我们即可看到别人是如何实现的,学会它这知识就是你的了,仔细钻研也会有意想不到的收获

    4.Console控制台:用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:

    a: 一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便,即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然

    其他功能

    b: 除了console.log还有其他相关的指令可用

    console也有相关的API

    5.Sources js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式

    Sources Panel 的左侧分别是 Sources 和 Content scripts和Snippets

    • 对应的源代码

    • 格式化后的代码

    关于打断点调试的内容,下面介绍,先来说一些,其他平时基本没人用但是很有用的小点,比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码,所以推荐使用Sources下面的左侧的Sinppets代码片段按钮,这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息(新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法)

    • 自己书写的片段

    Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块

    无结果

    6.Network 网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看

    • 所有的资源

    以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息

    • 请求的相关信息

    打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据

    • 预览请求的数据

    7.Timeline标签页可以显示JS执行时间、页面元素渲染时间,不做过多介绍

    8.Profiles标签页可以查看CPU执行时间与内存占用,不做过多介绍

    9.Resources标签页会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍

    10.Security标签页 可以告诉你这个网站的安全性,查看有效的证书等

    11.Audits标签页 可以帮你分析页面性能,有助于优化前端页面,分析后得到的报告

    • 分析结果

    二.Sources资源页面的断点调试

    1.如何调试:

    调试js代码,肯定是我们常用的功能,那么如何打断点,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点

    2.断点与 js代码修改

    看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试,右侧最上面一排分别是:暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区

    • 在代码中打断点

    在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了

    临时修改

    3.快速进入调试的方法

    当我们的代码执行到某个程序块方法处,这个方法上可能你并没有设置相关的断点,此时你可以F11进入此程序块,但是往往我们的项目都是经过很多源代码封装好的方法,有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处

    4.调试的功能区域

    每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能

    Call Stack调用栈:当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码

    但是若你想从新从某个调用方法出执行,可以右键Restart Frame, 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看

    Breakpoints关于断点:所有当前js的断点都会展示在这个区域,你可以点击按钮用来“去掉/加上”此处断点,也可以点击下方的代码表达式,调到相应的程序代码处,来查看

    XHR Breakpoints

    在XHR Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断

    DOM Breakpoints:

    可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改,只想看看它的变化情况,那么可以给它来个监听事件,这个时候DOM Breakpoints中会如图

    当要给DOM添加断点的时候,会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来

    Event listener Breakpoints 

    最后Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断

    三.Post man你值得拥有的网络请求神器

    在我们的开发过程中,后端的接口都是由发起AJAX请求而获取到的相关数据,但是很多情况是我们的业务还没有做到那块时,后端的同学接口都已经准备好了,但是为了便于后期的工作,将接口请求的数据模拟访问,然后对接口联调很重要,也很方便,因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看,这时候可以安装一个post man网络请求插件,在谷歌应用商店下载,需要梯子。

    该扩展程序使用非常简单,功能同时也非常强大,输入你的请求,选择好请求的method,需要请求参数的挨个填好,send之后,就可以看到返回的数据,这个小工具很利于我们的开发

    完结

    写到这里这篇总结就结束了,也许有很多写的不到位的地方,也有一些专业用词不严谨的地方,希望看到的读者可以和我一起交流,我也非常乐意我的总结可以给 刚刚学会编程需要调试的同学受用,再此之前我一直在寻找一篇从头到尾的调试教学文章,我一直没有找到,要么是一点点的片段讲解,要么是专讲js断点调试,所以索性后来就直接看了 Chrome Developer Tools 的英文官方文档,并结合自己的一些小使用心得总结出此文,希望受到指点和修正 也希望可以帮助一些同学~

    展开全文
  • Chrome浏览器调试技巧

    千次阅读 2018-08-24 13:33:11
      这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最...通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它...

    摘自网络:地址http://www.cr173.com/gonglue/62840_1.html

     

    这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没有js断点功能,只能在IE(万恶的IE)中靠alert弹出窗口调试js代码的时代(特别alert一个object根本不会理你),那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法,帮助各位在开发过程中够愉快地调试js代码,而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:

    相关链接 版本说明 下载地址
    谷歌浏览器2015 正式版 查看
    谷歌浏览器翻译插件 官方安装版 查看
    谷歌浏览器控件 工行网银控件 查看
    谷歌浏览器64位版 官方版 查看
    谷歌浏览器mac版 官方正式版 查看
    谷歌浏览器正式版 在线安装 查看
    谷歌浏览器测试版 官方版 查看
    谷歌浏览器快捷工具 工具控件 查看
    谷歌浏览器转手机 安卓版 查看
    谷歌浏览器网页截图 插件 查看
    谷歌浏览器保存密码获取 中文版 查看
    谷歌浏览器缓存路径 修改工具 查看
    谷歌浏览器更新器 绿色版 查看
    谷歌浏览器华为网盘控件 官方安装版 查看

    Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

    谷歌浏览器2015最新版下载:http://www.cr173.com/soft/2349.html

    首先我们来看区域1,它的功能有些类似于Resources面板,主要是显示网页加载的脚本文件:例如css, js等资源文件(它不包含cookie,img等静态资源文件)。

    区域1的导航条上有三个tab切换选项,他们都存有不同域名和环境下的js和css文件,我们首先来说明Sources(资源)选项的作用:

    Sources: 包含该项目的静态资源文件。双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令:

    从上图可以看到js执行到断点处时各个区域的变化,首先是区域3中的Breakpoints记录信息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息,这样,我可以很直观地知道,此时此刻js的执行状态。同样的,你可以把鼠标放到区域2种的某个变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有信息:

       然后,你可以按F10跟着js执行的路径一步一步地走下去,如果你遇到了一个函数包含着另外一个函数,那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键,故名思义,因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。

    在上图蓝色圆圈中数字,它们分别代表:

    1、停止断点调试

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

    3、跳入函数中去(F11)

    4、从执行的函数中跳出

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

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

    接下来在区域4种切换到Watch Expressions 选项,它的作用是为目前断点添加表达式,使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用,因为这可能会导致你写下的监控代码段会不断地被执行。

    为了避免你的调试代码重复执行,我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息(推荐这样做)。为了验证我们在console面板中拥有的是当前断点环境,我门可以对比断点执行前后的this值变化。

    如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦,那么你可以更新最新版的Chrome,它已经为我们解决了这个烦恼。为了方便开发者调试,在这一点上谷歌已经做到了极致,就在前几天更新过Chrome以后,卤煮意外地发现了断点时监控环境变量的另外一种方式,这种方式极为清晰,在断点调试的时候,区域2中会自动显示每个变量的值,每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。(此功能有一个小缺陷,那就是无法查看数组或者对象的具体索引和值,不过我相信google会改进它的。)

    当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在Chrome里面,只需要在区域2种直接修改,你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。

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

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

    在Snippets选项的空白处右键后选择弹出的new选项,建立一个你自己的新的文件,然后在区域2种编辑它。

    Snippets 的非常功能强大,它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。

    最后我们看看js中时间丰富的监控功能,同上篇文章介绍的一样,Sources面板和Elements面板一样有监控事件的功能,而且Sources中功能更加丰富,也更加强大。它的这部分功能集中在区域3中。我以下图为例,观察其作用。

    从上到下,紫色圈内的数字的意义:

    1、断点处的债堆栈,就是从该函数起,逐级追寻调用到他的函数名。例如:

    function a () {   b(); } function b() {   c();   } function c() {  //在该处断点,查看call stack   } a->b->c. call stack 从上到下的顺序就是 c b a

    2、在区域2中你的断点调试信息。当某个断点在执行的时候对应的信息会高亮,双击该处信息可以在区域2中快速定位。

    3、添加的Dom监控信息。

    4、击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

    5、为网页添加各种类型的断点信息。如选中了Mouse中的某一项(click),当你在网页上出发这个动作(单击网页任意地方),你浏览器就是立刻断点监控该事件。

    展开全文
  • chrome 调试

    2019-07-13 21:01:03
    参考资源:使用大全:... Chome调试的6个技巧:https://cloud.tencent.com/developer/news/158028 调试相关:https://www.jb51.net/article/123340.htm chrome performance使用指南:https://...

    参考资源:使用大全:https://www.cnblogs.com/soyxiaobi/p/9598761.html 

    Chome调试的6个技巧:https://cloud.tencent.com/developer/news/158028

    调试相关:https://www.jb51.net/article/123340.htm

    chrome performance使用指南:https://blog.csdn.net/tang_yi_/article/details/81949413

    https://www.cnblogs.com/ranyonsue/p/9342839.html

    首屏时间(FirstScreen Time)和白屏时间(first Paint Time)的计算:https://www.cnblogs.com/longm/p/7382163.html

    chrome调试,打完断点后关于JS的几个控制介绍
    打完断点之后,关于JS的几个控制介绍。

    1. 快捷键:F8

    “逐过程执行”,继续执行代码,直到遇到下一个断点。

    详细解释:暂停和开始。当设置了断点之后,js的执行就暂停了,如果我们想要跳过当前的断点继续执行js,就可以点击这个按钮,点击之后js的执行会继续,如果在接下来的执行过程中再次遇到断点,那么就会在那个断点处暂停。

    2. step over 快捷键:F10 全称:step over next function 
    单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步

    3. step into 快捷键:F11 全称:step into next function 
    单步执行,遇到子函数就进去继续单步执行

    4. step out 快捷键:Shift + F11 全称:step out of current function 
    直接跳出当前的函数,返回父级函数

    5. step 快捷键:F9 单步执行

    6. 快捷键:Ctrl + F8 

    最后一个按钮是激活和反激活所有的断点,如果当前的断点是激活的,点击之后所有的断点将不起作用,再次点击之后恢复作用。

    7. Don't Pause / Pause on exceptions

    要不要在抛出异常时暂停

     

    展开全文
  • 超完整的CHROME调试

    2019-04-04 16:54:37
    一. 先来认识一下这些按钮 先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这...

    一. 先来认识一下这些按钮 
    这里写图片描述 
    先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看

    1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

    2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择

    这里写图片描述 
    可选择的适配

    3.Elements 功能标签页:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息,下图我们可以看到当我鼠标选择id 为lg_tar的div元素时,右侧的css样式对应的会展示出此id 的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效, 灰色的element.style样式同样可以进行添加和书写,唯一的区别是,在这里添加的样式是添加到了该元素内部,实现方式即:该div元素的style属性,这个页面的功能很强大,在我们做了相关的页面后,修改样式是一块很重要的工作,细微的差距都需要调整,但是不可能说做到每修改一点即编译一遍代码,再刷新浏览器查看效果,这样很低效,一次性在浏览器中修改之后,再到代码中进行修改

    这里写图片描述

    对应的样式
    

    这里写图片描述

    盒模型信息
    

    同时,当我们浏览网站看到某些特别炫酷的效果和难做的样式时候,打开这个功能,我们即可看到别人是如何实现的,学会它这知识就是你的了,仔细钻研也会有意想不到的收获

    4.Console控制台:用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:

    a: 一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便,即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然

    这里写图片描述 
    其他功能

    b: 除了console.log还有其他相关的指令可用

    这里写图片描述 
    console也有相关的API

    5.Sources js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式

    Sources Panel 的左侧分别是 Sources 和 Content scripts和Snippets 
    这里写图片描述 
    对应的源代码

    这里写图片描述

    格式化后的代码
    

    关于打断点调试的内容,下面介绍,先来说一些,其他平时基本没人用但是很有用的小点,比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码,所以推荐使用Sources下面的左侧的Sinppets代码片段按钮,这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息(新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法) 
    这里写图片描述

    自己书写的片段
    

    Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块 
    这里写图片描述 
    无结果

    6.Network 网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看 
    这里写图片描述 
    所有的资源

    以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息 
    这里写图片描述 
    请求的相关信息

    打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据 
    这里写图片描述 
    预览请求的数据

    7.Timeline标签页可以显示JS执行时间、页面元素渲染时间,不做过多介绍

    8.Profiles标签页可以查看CPU执行时间与内存占用,不做过多介绍

    9.Resources标签页会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍

    10.Security标签页 可以告诉你这个网站的安全性,查看有效的证书等

    11.Audits标签页 可以帮你分析页面性能,有助于优化前端页面,分析后得到的报告 
    这里写图片描述 
    分析结果

    二.Sources资源页面的断点调试

    1.如何调试:

    调试js代码,肯定是我们常用的功能,那么如何打断点,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点 
    这里写图片描述 
    2.断点与 js代码修改

    看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试,右侧最上面一排分别是:暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区 
    这里写图片描述 
    在代码中打断点

    在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了 
    这里写图片描述 
    临时修改

    3.快速进入调试的方法

    当我们的代码执行到某个程序块方法处,这个方法上可能你并没有设置相关的断点,此时你可以F11进入此程序块,但是往往我们的项目都是经过很多源代码封装好的方法,有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处

    这里写图片描述 
    4.调试的功能区域

    每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能 
    这里写图片描述 
    Call Stack调用栈:当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码 
    这里写图片描述 
    但是若你想从新从某个调用方法出执行,可以右键Restart Frame, 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看 
    这里写图片描述 
    Breakpoints关于断点:所有当前js的断点都会展示在这个区域,你可以点击按钮用来“去掉/加上”此处断点,也可以点击下方的代码表达式,调到相应的程序代码处,来查看 
    这里写图片描述 
    XHR Breakpoints

    在XHR Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断 
    这里写图片描述 
    DOM Breakpoints:

    可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改,只想看看它的变化情况,那么可以给它来个监听事件,这个时候DOM Breakpoints中会如图 
    这里写图片描述 
    当要给DOM添加断点的时候,会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来

    Event listener Breakpoints

    最后Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断

    三.Post man你值得拥有的网络请求神器

    在我们的开发过程中,后端的接口都是由发起AJAX请求而获取到的相关数据,但是很多情况是我们的业务还没有做到那块时,后端的同学接口都已经准备好了,但是为了便于后期的工作,将接口请求的数据模拟访问,然后对接口联调很重要,也很方便,因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看,这时候可以安装一个post man网络请求插件,在谷歌应用商店下载,需要翻墙 
    这里写图片描述 
    该扩展程序使用非常简单,功能同时也非常强大,输入你的请求,选择好请求的method,需要请求参数的挨个填好,send之后,就可以看到返回的数据,这个小工具很利于我们的开发 
    这里写图片描述
    完结

    写到这里这篇总结就结束了,也许有很多写的不到位的地方,也有一些专业用词不严谨的地方,希望看到的读者可以和我一起交流,我也非常乐意我的总结可以给 刚刚学会编程需要调试的同学受用,再此之前我一直在寻找一篇从头到尾的调试教学文章,我一直没有找到,要么是一点点的片段讲解,要么是专讲js断点调试,所以索性后来就直接看了 Chrome Developer Tools 的英文官方文档,并结合自己的一些小使用心得总结出此文,希望受到指点和修正 也希望可以帮助一些同学~

    展开全文
  • 下面总结一下一些常用调试方法,这些方法能让开发的工作顺利并且高效,这里与各位程序猿同仁分享一下 一. 先来认识一下这些按钮 先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用...
  • Chrome断点调试

    千次阅读 2018-04-05 14:14:08
    1.断点调试是啥?难不难?断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先...
  • 超级实用的chrome浏览器调试技巧

    千次阅读 2019-06-28 11:12:41
    Chrome 谷歌浏览器调试界面友好,性能强大,下面简单介绍开发者工具的几个超级使用的调试技巧。 一、快速预览文件 如果你使用过sublime 编辑器,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到...
  • 使用Chrome调试JavaScript

    千次阅读 2018-11-15 23:03:51
    如果你之前没有仔细了解过DevTools,那我相信通过这篇文章的简要介绍,应该能为你打开新世界的大门,感叹Chrome里居然“隐藏”了这么一个强大的工具。
  • chrome调试工具使用之js篇

    千次阅读 2018-12-27 10:35:59
    如果您还在使用 console.log 来进行 js 的代码调试,那么可以考虑看看下面的内容,有效的提高工作效率。 断点调试 代码断点 1、打开调试工具(Ctrl/Cmd + Shift + C)。 2、单击 Sources 选项卡。 3、打开包含要中断...
  • 谷歌浏览器调试技巧

    万次阅读 2018-08-19 13:45:00
    因为上周一直在前段页面找一个东西,中间用到了谷歌浏览器的调试,来大概总结一下。 Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到...
  • chrome调试手机网页

    千次阅读 2019-05-28 11:54:08
    chrome 手机调试 写在前面 相信很多人都试过,在电脑调试一点问题都没有,可是到了手机端各种问题,兼容、数据捕获 等问题 很多时候我们都是通过 vconsole 进行调试。(至于怎么用就自行百度,这里不展开)。 可是 ...
  • Chrome 调试快捷键

    万次阅读 2018-12-28 00:11:24
    Debugger(调试面板) F8 or Ctrl + \: 暂停/继续 F10 or Ctrl + ': 单步执行 F11 or Ctrl +;: 单步进入 Shift + F11 or Ctrl + Shift+;: 单步退出 Ctrl +./Ctrl+, : 上一帧/下一...
  • Vue项目调试总结-WebStorm+Chrome调试

    万次阅读 热门讨论 2019-06-27 12:40:51
    Vue项目调试总结-WebStorm+Chrome调试 Vue项目调试总结-WebStorm+Chrome调试 - 为程序员服务 http://ju.outofmemory.cn/entry/354985 Vue项目其实是可以调试的,刚接触Vue项目开发时,在网上搜了一堆关于Vue...
  • Chrome调试

    千次阅读 2015-04-08 17:37:26
    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。 Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。...
  • Chrome调试功能的使用

    2018-11-26 08:26:47
    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。 下面整理一下如何使用Chrome进行调试。 怎样打开Chrome的开发者工具? 直接在页面上点击右键...
  • Chrome 调试技巧

    2018-09-18 23:21:07
    本文调试均在chrome浏览器进行。 alert 这个不用多说了,不言自明。 console 基本输出 想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法: console.log("打印字符串");//在...
  • 你所不知道的Chrome调试技巧(上)

    千次阅读 2017-11-21 00:14:42
    默认是基于chrome来进行调试的,如果是其他浏览器,不一定能支持(特别是IE)1、显示堆栈调用 console.trace(flags) 个人感觉这个用的也比较少。原因在于如果需要捕捉堆栈,一般是出错的时候,但出错的时候抛错会...
  • Chrome调试面板及调试技能

    千次阅读 2019-04-16 10:37:42
    Chrome调试面板浏览器位于右上角,如下图所示 或者使用 Ctrl+Shift+I 快捷键 都可以打开。 1、认识面板 1是元素,是构建这个网页的DOM树以及CSS样式渲染。在这里可以查看每个元素的占比和样式,可以修改...
  • Chrome调试神器学习HTML前端

    千次阅读 2018-06-16 17:30:19
    既然Chrome调试模式可以查看源代码,可以查看标签属性,我就直接在调试模式下编辑便签属性了。如图我想修改一个div的属性,直接添加可能的熟悉关键字,它会自动推荐或补全,甚至于标签的可能值,也会推荐可能的值。...
  • HBuilder之Chrome调试Android手机

    千次阅读 2016-06-30 09:00:50
    调试是软件开发过程中很重要的环节,它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查...
1 2 3 4 5 ... 20
收藏数 66,007
精华内容 26,402
关键字:

chrome调试