开发者⼯具source看不了代码_测试⼈员不得不会的开发
者⼯具使⽤指南
1.如何调出开发者⼯具
按F12调出
右键检查（或快捷键Ctrl+Shift+i）调出
2.开发者⼯具初步介绍
chrome开发者⼯具最常⽤的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），⽹络（Network）。
元素（Elements）：⽤于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显⽰。⼤⼤⽅便了开发者调试页⾯
控制台（Console）：控制台⼀般⽤于执⾏⼀次性代码，查看JavaScript对象，查看调试⽇志信息或异常信息。还可以当作Javascript API查看⽤。例如我想查看console都有哪些⽅法和属性，我可以直接在Console中输⼊"console"并执⾏~
源代码（Sources）：该页⾯⽤于查看页⾯的HTML⽂件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
⽹络（Network）：⽹络页⾯主要⽤于查看header等与⽹络连接相关的信息。
2.1元素（Elements）
查看元素的代码：点击左上⾓的箭头图标（或按快捷键Ctrl+Shift+C）进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素（Elements）⼀栏中定位到该元素源代码的具体位置
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。
当然从源代码中读到的只是⼀部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看：
修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进⾏的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进⼊编辑模式，可以对元素的代码进⾏任意的修改。当然，这个修改也仅对当前的页⾯渲染⽣效，不会修改服务器的源代码，故⽽这个功能也是作为调试页⾯效果⽽使⽤。
查看元素的CSS属性：在元素的右边栏中的styles页⾯可以查看该元素的CSS属性，这个页⾯展⽰该元素原始定义的CSS属性以及从⽗级元素继承的CSS属性。从这个页⾯还可以查到该元素的某个CSS特性来⾃于那个CSS⽂件，使编码调试时修改代码变得⾮常⽅便。
在Styles页旁边，有⼀个Computed页⾯，这个页⾯展⽰该元素经过计算之后的所有CSS属性，即最后浏览器渲染页⾯时使⽤的属性。属性的计算由浏览器⾃动进⾏，是浏览器渲染页⾯的⼀个必不可少的过程。
修改元素的CSS属性：在元素的Styles页⾯，可以对元素的CSS属性进⾏修改，甚⾄删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页⾯展⽰⽣效，不会修改CSS源代码。所以在这⾥进⾏CSS属性的修改⼀般⽤来调整和完善元素的渲染效果。
给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页⾯加载会暂停，然后可以查看该元素的属性。
元素断点添加之后，可以在右侧栏的DOM Breakpoints页⾯中看到，这个页⾯可以看到当前⽹页的所有元素断点。
查看元素的监听事件：元素的右边栏的Event Listener页⾯，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他⼈的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页⾯中到。这个页⾯不仅能看到对应的事件函数，还可以定位该函数所在的JS⽂件以及在该⽂件中的具体位置（⾏数），⼤⼤提⾼开发维护的效率。
控制台（Console）
查看JS对象的及其属性：
执⾏JS语句：
查看控制台⽇志：当⽹页的JS代码中使⽤了console.log()函数时，该函数输出的⽇志信息会在控制台中显⽰。⽇志信息⼀般在开发调试时启⽤，⽽当正式上线后，⼀般会将该函数去掉
源代码（Source）
查看⽂件：在源代码（Source）页⾯可以查看到当前⽹页的所有源⽂件。在左侧栏中可以看到源⽂件以树结构进⾏展⽰。
添加断点：在源代码左边有⾏号，点击对应⾏的⾏号，就好给改⾏添加上⼀个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
中断调试：添加断点后，当JS代码运⾏到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的
也可以在右边的侧栏上查看：
在右侧变量上⽅，有继续运⾏、单步跳过等按钮，可以在当前断点后，逐⾏运⾏代码，或者直接让其继续运⾏。
Network详细介绍如何查看html代码
那我就按照从左到右的顺序来写啦~
：记录按钮 处于打开状态时会在此⾯板进⾏⽹络连接的信息记录，关闭后则不会记录。
：
清除按钮 清除当前的⽹络连接记录信息。（点击⼀下就能清空）
：捕获截屏 记录页⾯加载过程中⼀些时间点的页⾯渲染情况，截图根据可视窗⼝截取，如下图所⽰。
：过滤器 能够⾃定义筛选条件，到⾃⼰想要资源信息，如下图所⽰。
：显⽰详细信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。