金沙js333娱乐场[转]谷歌(Google)Chrome浏览器开发者工具教程—JS调节和测试篇

Chrome开发者工具不完全指南(2、进阶篇)

2015/06/23 · HTML5 · 3
评论 ·
Chrome

原来的书文出处:
卖烧烤夫斯基   

上篇向咱们介绍完了根基成效篇,此番分享的是Chrome开发工具中最有效的面板Sources
 Sources面板大致是作者最常用到的Chrome作用面板,也是在小编眼里决解壹般问题的机要功能面板。平常就算是开发遇到了js报错大概其余代码难点,在审视叁次自身的代码而赤手空拳之后,作者第3就会打开Sources拓展js断点调节和测试,而它也大概能消除本身八成的代码难点。Js断点那些职能令人快乐不已,在未曾js断点作用,只可以在IE(万恶的IE)中靠alert弹出窗口调节和测试js代码的一代(尤其alert一个object根本不会理你),那样的支付环境对于前端程序员来说大概是一场惊恐不已的梦。本篇小说讲会介绍Sources的切实可行用法,支持各位在支付进度中够高兴地调节和测试js代码,而不是因它而疯狂。首先打开F1二开发工具切换成Sources面板中:

金沙js333娱乐场 1

Sources功能面板是能源面板,他第3分为多少个部分,八个部分并不是单身的,他们竞相关联,互动共同促成3个重中之重的功效:监察和控制js在执行期的移位。简单的话就是断点啊。

率先大家来看区域一,它的作用某些类似于Resources面板,重即便突显网页加载的台本文件:例如css,
js等财富文件(它不含有cookie,img等静态能源文件)。

 

金沙js333娱乐场 2

 

 

 

区域一的导航条上有多少个tab切换选项,他们都存有例外域名和条件下的js和css文件,大家首先来表明Sources(能源)选项的功力:

Sources:
包括该项目标静态能源文件。双击选汉语件,该文件内容会在区域第22中学显示,若是您选中的是js文件,那么你能够在区域贰种单击行号进行断点调试,只要js执行到了您所标记的那壹行,它会结束向下实行并且等待你的一声令下:

金沙js333娱乐场 3

从上海教室能够看出js执行到断点处时每个地方的变迁,首先是区域三中的Breakpoints记录音信会变高亮,然后是区域肆中Scope 选择中列出了断点处私有和国有的变量新闻,那样,作者能够很直观地明白,此时此刻js的实践情形。同样的,你能够把鼠标放到区域二种的某些变量上,浏览器会弹出3个小框框,框框里面则是您悬浮其上的变量全数新闻:

 

金沙js333娱乐场 4

然后,你能够按F10随之js执行的途径一步一步地走下去,即便您遇到了多个函数包涵着别的一个函数,那么你能够按F11进去到个函数中去调查它的代码执行活动。你也足以通过点击区域一平底的次第图标对js代码进行跟踪。可是笔者提出你利用快捷键,故名思义,因为它比较赶快便宜。但是怎么用完全遵照个人习惯来吗。下图是逐一按钮的功用效果。

 

金沙js333娱乐场 5

 

 在上海体育场面葡萄紫圆圈中数字,它们分别代表:

  一、结束断点调试

  贰、不跳入函数中去,继续执行下一行代码(F十)

  三、跳入函数中去(F11)

  4、从履行的函数中跳出

  伍、禁止使用全部的断点,不做任何调试

  六、程序运维时碰到特别时是还是不是中断的开关

接下去在区域四种切换来Watch
Expressions
 选项,它的法力是为当前断点添加表明式,使得每一趟断点往下走一步都会进行你写下的js代码。须要注意的是以此作用亟须审慎运用,因为那只怕会促成你写下的监督代码段会不断地被执行。

金沙js333娱乐场 6

 

为了幸免你的调节代码重复执行,大家得以在调节和测试时一向在console控制台上三次性地出口当前断点处的消息(推荐那样做)。为了印证大家在console面板中具备的是现阶段断点环境,小编门能够比较断点执行前后的this值变化。

金沙js333娱乐场 7   
  金沙js333娱乐场 8

若果您觉得在断点的时候为了看1个变量必须借用console面板输出的章程来查看会比较艰辛,那么您能够立异最新版的Chrome,它早已为我们消除了那么些烦恼。为了方便开发者调节和测试,在那或多或少上谷歌(谷歌)已经形成了极其,就在前几日更新过Chrome今后,卤煮意各省意识了断点时监察和控制环境变量的其它1种方法,这种艺术极为清晰,在断点调节和测试的时候,区域第22中学会自动展现每种变量的值,每一次代码往下走的时候这几个值都回时时更新。这让开发者对脚下环境变量差不离能够说是洞察。(此功用有三个小瑕疵,那正是无能为力查看数组大概目的的求实索引和值,但是我深信google会立异它的。)

金沙js333娱乐场 9

 

当你的品种现已线上,出现了一个bug,你修复了未来不能看到它实在在线上的职能,那么您可以在开辟线上的体系,直接在浏览器中期维修改代码然后看到成效。那样的功力往往是最直白的,那种办法也能帮你省去频仍验证公布的辛劳,究竟身为前端码农的您也必定会听到过后台(日常意况下是后台发表)三弟的抱怨:“XXX,测试通过了没,不要出现了哈,公布一回很劳苦的!”。而在Chrome里面,只需求在区域二种直接修改,你就能够表达你的代码在线上是或不是行得通。卤煮在此处只是建议该作用的用法之1。别的的就凭诸位的聪明才智去想了。

金沙js333娱乐场 10   
 
  金沙js333娱乐场 11

即使在断点时,你也能够编写制定代码,按ctrl+S保存之后,你会看出区域2的背景由灰白变为浅色,而断点会重新先河履行。

重临区域1,Content
script
 选项开里面包蕴着一些第二方插件也许浏览器自个儿的js代码,平时它是被忽视的,实际上它的功能很少。我们得以越多关怀一下Snippets慎选。还记得基础篇里面介绍的style啊?在其间大家得以编制界面包车型地铁css代码并且即时看到它们的映射效果,同样地,在Sinppets中,我们也
能够编制(重写)js代码片段。那些部分其实就也正是你的js文件壹律,分化的是地面包车型客车js文件在编辑器里面编辑的,而这里,你是在浏览器中编辑的。那么些代码片段在浏览器刷新的时候既不会流失,也不会执行,除非是你手动执行它。它能够存在你的本地浏览器中,就算关闭浏览器,再一次打开时它依旧还在那边。它的关键意义可以使得大家编辑一些品类的测试代码时提供方便人民群众,你知道,若是您在编辑器上编写制定那几个代码,在公布时你无法不为它们增加注释符号或许手动删除它们,而在浏览器上编写制定就不须求那样麻烦了。

Snippets选料的空白点右键后采纳弹出的new选项,建立多少个您本身的新的文书,然后在区域贰种编辑它。

金沙js333娱乐场 12

 

Snippets 的非常功效强大,它的众多藏身作用还有待挖掘。方今卤煮使用它是在挥之不去调节和测试片段、单元测试、少量的效应代码编写功效上。

末段大家看看js中时间累加的监察和控制成效,同上篇小说介绍的相同,Sources面板和Elements面板一样有监督事件的职能,而且Sources中作用更是助长,也愈加有力。它的那有的效能集中在区域3中。小编以下图为例,观望其意义。

金沙js333娱乐场 13

 

从上到下,原野绿圈内的数字的意思:

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

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

2、在区域第22中学你的断点调节和测试音信。当某些断点在推行的时候对应的音信会高亮,双击该处消息可以在区域2中相当慢稳定。

三、添加的Dom监察和控制消息。

四、击+ 并输入 U安德拉L 包蕴的字符串即可监听该 U宝马X三L 的 Ajax
请求,输入内容就也正是 U昂科雷L 的过滤器。假设什么都不填,那么就监听全体 XH奥迪Q三请求。壹旦 XHHighlander 调用触发时就会在 request.send() 的地点暂停。

伍、为网页添加各种类型的断点新闻。如选中了Mouse中的某一项(click),当您在网页上出发这一个动作(单击网页任意地点),你浏览器正是随即断点监控该事件。

 

值得再度重新叁次,Sources是形似的功力开发中最常用到也是最实用的效力面板,它里面包车型大巴诸多成效对于大家付出前端工程以来是那一个有帮扶的。在web2.0一时半刻的明天,小编不推荐还是在祥和的代码里面写调节和测试音讯的行事,因为那会然你的付出变得繁琐。Chrome开发工具给大家提供的精锐功能,我们理应能够利用之。那篇文章就到此甘休,固然有个别麻烦,但毕竟基本发挥了卤煮使用经验和设法,希望对你有帮带。倘若您以为不错,请推荐一下本文并一连关切卤煮在的博客。在下一篇中自笔者将向我们介绍Chrome开发工具中的质量方面包车型大巴调节。

1 赞 15 收藏 3
评论

金沙js333娱乐场 14

来源:

React Native / React调节和测试技巧

做过原生APP开发的同桌们都明白,大家在Xcode和studio中就足以一贯对编写的代码举办断点调节和测试,很便宜,可是web开发断点调节和测试就不能够向来在开发工具中做到了,必要依靠浏览器来实现,React相关的支付断点调节和测试和web开发大多1样,也是在浏览器上拓展调节和测试,纵然尚无原生那么便民,然则也还算简单。React
Native调节和测试要求依靠官方的Developer Menu,上边大家就来总结聊聊这几个Developer Menu
Chrome Developer Tools

上1篇我们上学了谷歌(Google)Chrome浏览器开发者工具的底蕴成效,上边介绍的是Chrome开发工具中最得力的面板Sources。 Sources面板大约是最常用到的Chrome功用面板,也是消除相似难点的严重性效率面板。经常即使是付出蒙受了js报错大概其余代码难题,在审视三遍代码而四壁萧条之后打开Sources进行js断点调节和测试,差不多能一举成功8成的代码难题。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够经过Command⌘ + D神速键来火速打开Developer Menu
  • android模拟器
    • 能够经过Command⌘ + M急速键来火速打开Developer
      Menu。也得以因而模拟器上的菜单键来开辟

真机开启Developer Menu

  • iOS和Android真机通过摇入手提式有线电话机来打开Developer Menu

js断点功用令人欢愉不已,以前只还好IE中靠alert弹出窗口调试js代码,那样的费用环境对于前端程序员来说几乎是一场恶梦。本篇介绍Sources的具体用法,支持各位在开发进程中够喜悦地调节和测试js代码,而不是因它而疯狂。

Reloading JavaScript

在只是修改了js代码的意况下,就算要预览修改结果,你不供给再一次编写翻译你的选取。在那种意况下,你只供给告诉React
Native重新加载js即可。

注意:
假诺你改改了native的代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是可怜的,那时你需求重新编写翻译你的种类了

Reload js

Reload js将您项目中js代码部分重新生成bundle文件,然后传输给模拟器或手提式有线电话机

在Developer Menu中单击Reload让React
Native重新加载js。对于iOS模拟器你也足以经过Command⌘ + R飞速键来加载js,对于Android模拟器能够通过双击r键来加载js

注意:如果Command⌘ + PRADO 不可能使您的iOS模拟器加载js,能够由此选中Hardware
menu中Keyboard选项下的 ‘Connect Hardware Keyboard’ 试试

Enable Live Reload

在 Developer Menu中有 ‘Enable Live Reload’ 选项,该接纳提供了React
Native动态加载的功能。当您的js代码发生变化后,React
Native会自动生成bundle然后传输到模拟器或手提式有线电话机上

gif

Enable Hot Reloading

Developer Menu中还有一项必要专门介绍的,正是’Enable Hot
Reloading’热加载,倘使说Enable Live Reload解放了您的双手的话,那么Hot
Reloading不但解放了您的单臂而且还解放了你的时光。 当你每便保存代码时Hot
Reloading功用便会转变此番修改代码的增量包,然后传输到手提式有线电话机或模拟器上以促成热加载。相比Enable Live Reload必要每趟都回到到起步页面,Enable Live
Reload则会在维持您的顺序状态的情事下,就能够将流行的代码布署到设备上,当您做布局的时候运行Enable
Live Reload成效你就足以实时的预览布局功效了,方便省时

首先打开F12开发工具切换来Sources面板中

Warning

React
Native程序运营时出现的Warnings也会被直接展现在显示器上,以色情的背景展示,并会打字与印刷出警示音信,你也得以透过console.warn()来手动触发Warnings,你也得以经过console.disableYellowBox = true来手动禁止使用Warnings的呈现,恐怕经过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

金沙js333娱乐场 15

Error

React
Native程序运维时出现的Error会被直接展现在荧屏上,以深紫灰的背景彰显,并会打字与印刷出错误消息,
你也得以透过 console.error()来手动触发Error

img

注意: 在生产条件release下Error和Warning作用不在生效

Sources功用面板是财富面板,他根本分为多少个部分,八个部分并不是单身的,他们互相之间关联,互动共同促成2个最主要的作用:监察和控制js在执行期的活动。简单的话就是断点啊。

怎么真机调节和测试

  • iOS上

配置好相应的调节证书,间接连接线连接到真机械运输维即可

  • android

摇晃手提式有线话机,调出Developer Menu面板,在’Developer Menu’下的’Dev
Settings’中Debug server host & prot for
device配置自身路由器ip地址。端口使用80八1即可

image

image

第二大家来看区域一,它的功力有个别看似于Resources面板,首倘若显得网页加载的剧本文件:例如css,
js等财富文件(它不带有cookie,img等静态财富文件)。

Chrome Developer Tools

Chrome 开发工具

谷歌Chrome开发工具,是依据谷歌(谷歌)浏览器内含的壹套网页制作和调剂工具。开发者工具允许网页开发者深切浏览器和网页应用程序的里边。该工具得以使得地追踪布局难点,设置
JavaScript
断点并可深远掌握代码的最优化策略。Chrome开发工具一共提供了八大组织工作具:

  • Element 面板: 用于查看和编排当前页面中的 HTML 和 CSS 成分
  • Network 面板:用于查看 HTTP
    请求的详细信息,如请求头、响应头及重返内容等
  • Source 面板:用于查看和调剂当前页面所加载的剧本的源文件
  • 提姆eLine 面板: 用于查看脚本的实行时间、页面成分渲染时间等音讯
  • Profiles 面板:用于查看 CPU 执行时间与内部存款和储蓄器占用等消息
  • Resource 面板:用于查看当前页面所请求的能源文件,如 HTML,CSS
    样式文件等
  • 奥迪(Audi)ts 面板:用于优化前端页面,加快网页加载速度等
  • Console 面板:用于体现脚本中所输出的调节和测试消息,或运维测试脚本等

注意: 对于调节和测试React
Native应用来说,Sources和Console是运用频率最高的多少个工具

您能够像调节和测试JavaScript代码壹样来调节你的React Native程序

金沙js333娱乐场 16

怎么着通过Chrome调节和测试React Native程序

  • 起步远程调节和测试

在Developer Menu下单击’Debug JS
Remotely’运转JS远程调节和测试功用,此时Chrome会被打开,同时会创设多少个’http://localhost:8081/debugger-ui’网页

image

  • 开拓Chrome开发者工具

在该’http://localhost:8081/debugger-ui’网页下开拓开发者工具,打开Chrome菜单->选拔越来越多工具->采取开发者工具。你也能够透过神速键(Command⌘ + Option⌥ + I
on Mac, Ctrl + Shift + I on Windows)打开开发者工具

开拓Chrome开发着工具之后您会看到如下界面

image

区域一的导航条上有四个tab切换选项,他们都存有两样域名和环境下的js和css文件,我们率先来证实Sources(能源)选项的作用:

Sources面板

Sources面板提供了调剂 JavaScript 代码的职能

image

Sources面板能够让您看到你所要检查的页面包车型客车全体脚本代码,并在面板选用栏下方提供了壹组正式控件,提供了刹车,恢复生机,步进等功能。在窗口的最下方的按钮能够在遇见尤其(exception)时强制中止。源码显示在单独的标签页,通过点击
打开文件导航面板,导航栏中会突显全数已打开的剧本文件

Chrome开发着工具中的Sources面板大约是最常用的效用面板。日常假设是开发蒙受了js报错可能其余代码难点,在审美三遍本人的代码而一介不取之后,首先就会打开Sources举办js断点调节和测试

执行控制工具

从上海教室能够见见’执行控制工具’按钮在侧板顶部,让您能够按步执行代码,当你进行调剂的时候那多少个按钮相当实用:

  • 继承(Continue): 继续执行代码直到遇到下1个断点
  • 单步执行(Step over):
    步进代码以查看每壹行代码对变量作出的操作,当代码调用另二个函数时不会进来这一个函数,使你能够小心于如今的函数
  • 跳入(Step into): 与 Step over
    类似,不过当代码调用函数时,调节和测试器会跻身那几个函数并跳转到函数的率先行
  • 跳出(Step out): 当你进来1个函数后,你能够点击 Step out
    执行函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 控制断点的开启和倒闭,同时保持断点完好

查看js文件

若是您想在开发者工具上预览你的js文件,能够在开拓Sources
tab下的debuggerWorker.js选项卡,该选项卡下会呈现当前调节和测试项指标具备js文件,大概是用高速键
cmd + o 调出文件搜索直接开始展览搜寻,那个特别方便人民群众火速

Sources:
包括该类型的静态能源文件。双击选汉语件,该文件内容会在区域第22中学呈现,要是您选中的是js文件,那么你能够在区域二种单击行号进行断点调节和测试,只要js执行到了你所标记的那1行,它会结束向下实行并且等待你的授命:

断点

断点(Breakpoint)是在本子中装置好的暂停处,在DevTools中利用断点能够调节和测试JavaScript代码

  • 足够和移除断点

在 Sources
面板的文件导航面板中开辟三个JavaScript文件来调节,点击边栏(line gutter)
为当前行设置三个断点,已经设置的断点处会有3个莲灰的竹签,单击黄绿标签,断点即被移除

image

右键点击肉桂色标签会打开二个菜谱,菜单包括以下选项:执行到此(Continue to
Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint),
编辑断点(艾德it Breakpoint),和 禁用断点(Disable
Breakpoint)。在此地您能够对断点举办更尖端的操作

image

高等操作

  • Continue to Here

设若您想让程序及时跳到某一行时,这一个作用会帮到你。要是在该行在此以前还有其余断点,程序会相继通过前面包车型大巴断点。其余索要建议的是其壹作用在四意一行代码的边栏(gutter
line)前单击右键都会看到

  • Blackbox scripts

黑盒脚本会从您的调用堆栈中躲藏第一方代码

  • Edit Breakpoint

通过该成效你能够成立七个原则断点,你也足以在边栏(gutter line)
右键并精选丰硕条件断点(Add Conditional Breakpoint)
。在输入框中,输入三个可解析为真或假的表明式。仅当规则为真时,执行会在个中断

image

假若您想让程序在某处平昔都无须暂停,能够编写一个规范永远为false的条件断点。别的,你也得以在该行代码的边栏(gutter
line)前单击右键选拔“Never pause here”即可,你会意识“Never pause
here”其实正是在该行代码上设了一个永恒为false的尺码断点

image

管制断点

您能够由此Chrome开发者工具的右边面板来归并保管你的断点

image

您能够因此断点前的复选框来启用和剥夺断点,也得以单击右键来开展更加多的操作(如:移除断点,移除全体断点,启用禁止使用断点等)

全局断点

全局断点的功力是,当程序现身万分时,会在非常的地点暂停,那对高效定位异的常地方很有益。
做iOS开发的同学都知晓在Xcode中能够安装全局断点,其实在Chrome
开发者工具中也一律有与之对应的机能,叫’Pause On Caught
Exceptions’。如若勾选上此功能,则就是所发生运营时拾1分的代码在 try/catch
范围内,Chrome 开发者工具也能够在错误代码处停住

image

金沙js333娱乐场 17

控制台

DevTools控制台(Console)能够让你在近来已中断的情事下展开考试。按 Esc
键打开/关闭控制台

你能够在控制台(Console)上打字与印刷变量,执行脚本等操作。在开发调节和测试中最常用

image

从上海体育场地能够观看js执行到断点处时各个地方的转变,首先是区域三中的Breakpoints记录新闻会变高亮,然后是区域4中Scope 选项中列出了断点处私有和国有的变量音信,那样,作者得以很直观地领略,此时此刻js的施行情况。同样的,你能够把鼠标放到区域二种的有些变量上,浏览器会弹出二个小框框,框框里面则是您悬浮其上的变量全部音讯:

有利时间

  • 作者React
    Native开源项目OneM地址(遵照公司支付规范搭建框架形成支付的):https://github.com/guangqiang-liu/OneM
    欢迎小伙伴们 star
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交换学习
  • 末尾强调:**付出中有遇上宝马X3N相关的技艺难点,欢迎小伙伴参加交换群,在群里提问、相互沟通学习。交换群也定期更新最新的福特ExplorerN学习质感给大家,多谢协理!
    **

金沙js333娱乐场 18

下一场,你能够按F10随后js执行的路线一步一步地走下去,倘诺你碰着了二个函数包蕴着别的3个函数,那么您能够按F1壹进入到个函数中去观望它的代码执行活动。你也足以经过点击区域1平底的顺序图标对js代码实行跟踪。可是本身提出您利用快速键,故名思义,因为它比较便捷便宜。可是怎么用完全依照个人习惯来呢。下图是各种按钮的法力意义。

金沙js333娱乐场 19

在上海教室卡其灰圆圈中数字,它们分别表示:

发表评论

电子邮件地址不会被公开。 必填项已用*标注