《火狐调试工具-DevTools的介绍与使用》由会员分享，可在线阅读，更多相关《火狐调试工具-DevTools的介绍与使用（8页珍藏版）》请在金锄头文库上搜索。
1、火狐调试工具-DevTools的介绍与使用咱们做写js代码的时候，遇到的一个最大的问题就是调试问题，很多开发者在写js代 码的时候，经常都非常痛苦。但是我们如果掌握好相应的调试工具，那么就可以比较游刃有 余的解决 js 的调试问题。工欲善其事,必先利其器。调试工具比较好的有火狐的firebug,另外chrome的自带调试工具也非常不错（英文版）。掌握好这些调试工具，可以更好的学习js,也可以大大提高咱们完成js的排错能力。因此, 我建议所有要使用 js 的人员都最好能好好的掌握一下这些工具。本来火狐的 firebug 一直以来都是我认为最好的调试工具，但是现在 Firebug 官方已经宣 布了
2、停止 Firebug 的维护，咱们新版本的火狐已经无法再使用它。以下是在官网找到的Firebug最新版本（最多只支持火狐47）：r hi cuug I ui r m ci ua兰匕 Current stable: 2.0.17Compatible with:|Firefox 33-47Download, Release Not隔 N酗 Femtug Source虽然非常可惜，但是好在火狐还有自带的调试工具，而Firebug团队也推荐大家可以使 用火狐的DevTools工具。下面就是我总结的这款工具的一些基本的使用方式。1、安装并打开调试工具下载火狐浏览器（我下载的firefox54）安装即可地
3、址：http:/ 砸复制打印选项新洼窗口新建隐私浏览BU 材加组件点击 Web 控制台打开WEB幵炭者3窗一|印卜同涉朋1切换丁吕箱Ctri+Shift+I寺看器Ctrl+Shift+CWmb控制台Ctrl4-5tiift+K调试器Ctrl+Shrft-hS样式编揖器Shift+F7性能5hift+F5网络Ctirl+Shift+Q川发者工具栏Shift+F2WeblDEShift + F8浏览器控制台Ctrl+Shift+J响应式设计模式Ctrl+Shift+M取色器代码草稿纸5hift+F4Service Worker页面源代码Ctil + U获取显寥丁脱机工作-1这时候可以看到调试工具已
4、经打开：* 旳1 jd-wriirfiowiew jp仲匸 hcLfE* cdlr .汩*町声 m1yrh*HiLirY： kKli; si %/diri-ism 代2、调试工具的页面总体介绍1）查看器：可以在下方看到页面的HTML代码，而选中某个HTML元素也可以看到它 对应的 CSS 样式（结合审查元素工具使用非常好）2）控制台：咱们用得最多的一个面板，可以自定义决定咱们要看哪些高度数据（console 打印的数据都在这里展示）3）调试器：可以为js添加debug功能4）样式编辑器: 查看当前页面的所有样式5）性能:分析js的每一个操作的性能6）内存:当前页面的一些堆栈内存7）网络：查看当
5、前每一次请求对咱们比较重要的工具有：审查工具,控制台,网络 现在，咱们就单独介绍一下这三个工具的使用：工具一：审查工具点击这个审查工具，我们就可以查看页面上的所有元素（使用方式如下图）:妙就走咱们的串查元素工貝，点.石一下即可+O直看器样貳解器性能 呑内存 二网络div i d=H swf E verycoo k i ewr ap dat a - f or=H re su 11 * tyle=l width: 0px; height: 0px; overflow: 卜 O c/script Ei控制吉 D调沆善 样式嗝須嚣 性能冉内占二网络+选中百业了颜巴I T |k 匕diw id-head
6、1晾禹肘代h*L|bi-ai widil-F咋D加旨 C- 7.EI $ ra.lu l-w r-do. iKLfa? TUMP口度一下w -DdlU L4-TjBJl| hidik: tri ；丿办_&詔11.&!1酣 iaiJIiJ hmli.cm谊边就出玦:馮寸单碌技式M讪 1讯二 rfLdrlvrj*tsp: - HlpM凰标斗M術十顷面灯国的元囂权可以热片应的比円y uiLi jdr-e-a b9 crtinhJHPfwrAt diw rrnri! I大家特别注意了，刚我们看得到每个元素与它对应的代码样式后，作用有两个：第1 是查看元素与样式：如果自己的 html 页面或者样式有问题
7、（比如不小心多加了一个 ,有的标签忘了闭合等等很多粗心的问题），在这里可以更加直观的看到（找错就不在话下）。第2 是修改元素与样式：在下面标签与样式都是可以修改的，亲可以自己去试一下。对 咱们HTML与CSS的开发也有直观的帮助（不过注意，这里的修改只是一时，页面刷新后修改 就作废了）。工具二：控制台控制台对咱们来说真的还是很重要，我们可以选择自己要看的是控制台哪一部分内容 其中最重要的是查看对于js代码中console的打印：注意：网络,CSS这些数据大家可以根据自己的需求打开（点一下文字出现阴影则被选 中），日志都是打开的（日志没打开，无法查看console）。工O育看器|15屈阿D调试器
8、畔式解器性能O内存-网塔肓 网络安全山）1孫HiI 服务器-张网直经駡怎样前过程,才能抵达川户位新人*耍渥历億样的成袪才能站在技术;探孑这里的秘密；休脸这里的挑战：信息成为这里的主人；X日志加入网页搜索你，町以影响卅:界诣将简Jlj发t 1ps .recru i Shared Workersconsoler：职位介绅:http: /dwz n/hrn2013aService Workers附加组件或Chrome Workersconsole打应出来的对象（JSON对象或者DOM对象）也可以使用工具查看到它的详细信息。 鼠标找到相应的对象即可,这也是一个非常实用的功能。工具三：网络网络分左右两部
9、分源禹吋代左边主要显示当前页面加载的所有资源（如HTML,CSS,JS，图片,.）。当然，要显示哪 些资源，需要你自己要确认。右边部分是对左边的某一个请求的分析（需要选中左边的某一个请求）。BIAB.rl! R.M!St 出七旷 riv 12720* pfx WWHJ.iMT1 O iftaE StftHD: i +：越 fm:O 帕 泗中m能.珏 y rttfi ： 1.褐Mt I ht:日如金 迪；障# it求S*愿曲占-AlirtKfitT-ivtoriN Nrniwtkni)b V曲sW.c?v-aJtSt VWWJUbMbCWHk 剩si伽 JRWGOmC-.WlihXGGF odn
10、boMeEk Domik 剜ceu加却mlfM*!書 odn booKiiL-antfnpl*i m曲qjjssFl.JTifif www.iunccbconi砒KhwvmMif rwiiMrimwflhawEr arATFhniS mmv lunoob coni首先在左边状态，我们可以看到，选到垃圾桶可以清空信息。要显示哪些信息自己点击 选中就可以，提供了一个所有展示方便我们查看所有请求。每一个请求都可以看到它的状态，请求方式，路径等。右边部分对我们开发的调试就非常重要了，如果在开发的时候知道到这里来找数据，很 多时候能帮助咱们快速定位到相应的错误。可以看到请求详细信息（包含请求头与响应头）
11、Cookie琴数响应耗话求网址：http:/ 话求方法：GET远程地tit： 220.181.7.190:80狀态码： 200 OK详细了解1编辑和曲版本：HTTP/1.1Y过滤消息头陋头213宇司|Cadi-（ uritiol: *priuaie!J mdx-a（jf 0 rit）-（ h（ lie审Content length: H4J审Content Type: imayc/gir谓Date; rThur 13 Jul 201 了 1421:00 GMT审PragniH： Fd-wdiy带Server: a pa rhe| 详X- （：cntmt-Type-Optidns: nosnit
12、t|审怙求头兀9字I o&t: 详J当前域名对应的 Cookie 信息：切 * P III J冃Tu f JL.JLJ HIILJ l+BJ -i-r *LF / g muj I J.J-r yJ JT消息头匚 Qokie参数V11濾 Cookie请求 CookieBAIDUID; C9CBrED24bB6905BF39F325EOn 08514:FG = VBIDUPSID:QCBFED246B6905BF3gF25E0l-l085UPSTM: T 49995018亍H PS PS 51 ）: 1430 21114 17D0TBDORZ:B490B旺BF6F3CD402B15D22BCDA1S98HMVT： T,8e2al 1 Gdaf0104a78d601
