如何使用 F12 f12开发人员工具具调试网页

IE浏览器怎么使用F12开人员工具提取视频下载地址?
IE浏览器中,开发员工具是专为开发者准备的网页调试工具,我们只需利用这个工具就能找出网页中的视频的真实地址,而不用借助其他的工具或者软件!
1、先来看看IE的开发人员工具在哪,打开IE浏览器,在右上角上,有个设置按键,点击设置按键,就能看到开发人员工具了,快捷键为F12!
2、网页格式一般为HTML,但是视频文件无法被直接整合进单个的HTML文件中,因此网页中的视频一定是独立的视频文件,视频文件在网页中的其他文件里,有文件体积大的显著特点,文件格式一般为flv、mp4、hlv、f4v等等!
3、打开一个视频网站的视频播放页面,开始播放视频,启动开发人员工具,快捷键F12,选择网络----开始捕获!(在视频缓冲阶段最好开始捕获了)
4、该工具会不断抓取数据,显示数据来源的URL地址,方法、结果、类型、已接收文件的大小,花费的时间,发起的程序等等!
5、接着就是要找出视频的原始地址了,在&已接收&一栏上单击该标题,即可对接收的文件大小进行排序,当视频缓冲开始时,排列在第一位,体积最大(也许还在不断增大),特别是对于后缀为视频格式的文件,就会是视频的原始地址!
6、在URL上单击右键,点击&复制URL&就能复制视频文件地址(此处一定注意是&复制URL&而不是&复制&),然后就能够在下载器中新建任务,粘贴地址,开始下载。
7、对于视频文件的判断,必须在视频开始缓冲之后才能够进行,否则会闹出将视频之前60秒广告下载下来的笑话也说不定,现在不少视频网站将视频进行了切割,因此下载时必须将每一段都下载下来!
如果您喜欢本文请分享给您的好友,谢谢!
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)  使用 F12 开发人员工具,Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。 通过内置到每个 Windows Internet Explorer&9 安装中,F12 工具可提供一些调试工具(例如,断点、监视和局部变量查看)以及一个用于消息和即时代码执行的控制台。
  本主题介绍如何使用 F12 工具来调试你的 JavaScript 代码。本主题的目的并不是要提供一个全面的调试教程,而是重点介绍可帮助你着手使用自己的代码的工具。从 Internet Explorer&9 中,按&F12&以打开工具,然后单击&脚本&选项卡即可开始使用。
  在&脚本&选项卡中,左侧将显示源代码窗格,可在其中查看 JavaScript 代码,设置断点并逐步执行函数的执行路径。在右侧窗格中,可在&控制台&、&监视变量&、&局部变量&、&监视堆栈&和&断点&选项卡之间进行切换。
  启动和停止调试程序
  首次打开 F12 工具并单击&脚本&选项卡时,会在左侧显示代码,在右侧显示控制台。在控制台中,可能会显示一条消息:"刷新此页以查看 F12 工具打开前可能已出现的消息。 "当刷新网页时,控制台会向你显示浏览器发出的任何错误或警告。
  若要能够设置断点,查看监视和局部变量,以及查看一系列函数的调用堆栈,则单击&开始调试&按钮。通过按&开始调试&按钮,可以刷新网页并在调试程序中重新启动代码。
  使用控制台查找语法和其他代码错误
  在大多数编码项目中,错误通常包含语法、逻辑或数据输入错误。控制台视图将显示 JavaScript 错误和异常,以及文档对象模型 (DOM) 异常。在你的代码内部,你可使用控制台对象将状态和程序错误消息发送到控制台,而不是使用 "alert()" 调用或屏幕空间。例如,你可以向 JavaScript 代码中添加一行(如
  JavaScript
window.console.log("The file opened successfully");)以在脚本中获取状态,而不中断执行。 有关使用控制台的详细信息,请参阅。
  使不美观的脚本更美观
  F12 工具可在行或语句级别调试 JavaScript,而不管代码是否按行或语句显示。那些大块的编写紧凑的代码仍可逐步执行。不过,如果将代码全部放在一个代码块中,则有时很难遵循逻辑。
  若要设置脚本格式或&出色打印&脚本,请单击&配置&按钮&,然后单击&格式化 JavaScript&。以下屏幕快照展示 JavaScript 代码块在格式化之前和之后的对比。
  中断代码执行
  在 F12 工具中设置断点的方式与在二进制代码调试程序(例如,Microsoft Visual Studio)中的方式相似。在左侧窗格中,单击要中断的代码行的左侧。断点是可以切换的,因此可以单击以添加断点,再次单击以移除断点。
  可以向代码中添加所需任意数量的断点。可以右键单击代码行并单击&插入断点&,或者单击要中断的语句旁边的左边距。
  通过使用 F12 工具,可在语句级别设置断点,即使这些语句位于多语句块或行中也是如此。从而能够在紧凑的代码节内进行中断。在这些条件下设置断点的最好方式是,右键单击代码,然后从快捷菜单中单击&插入断点&。还可使用前面介绍的脚本格式化(美观显示)功能来对代码行进行格式化,以方便在页边距中进行单击。
  通过使用&断点&选项卡管理多个断点
  如果你具有包含很多断点(甚至跨多个文件)的大型代码库,则&断点&选项卡可帮助你跟踪所有这些断点。 在&脚本&选项卡中,单击属性窗格(右侧窗格)中的&断点&选项卡。有关示例,请参阅下图。
  通过&断点&选项卡,可以启用或禁用、删除、选择并复制断点,而无需转到要设置它们的确切位置。若要打开或关闭某个断点,请单击要更改的设置旁边的复选框。通过双击列表,可立即跳转到代码中的断点。通过按&Ctrl&键并单击多个断点,可选择多个断点。
  &断点&选项卡还具有一个快捷菜单(当你右键单击时可用),可让你批量删除、启用、禁用或复制断点。下表中显示了相关选项。
菜单项作用
永久删除断点。
永久删除所有断点。
设置列表中的所有复选框。
清除列表中的所有复选框。
允许为断点设置条件断点。如果选择了多个断点,则此选项禁用。
复制所选择的断点描述的文本。
突出显示列表中的所有断点。
转到源代码
导航左侧代码窗格以显示所选的断点。如果选择了多个断点,则此选项禁用。
  条件断点
  无条件地中断一行代码是很有帮助的,但在某个属性或变量到达特定值时中断甚至更为有用。若要在到达或设置特定值时中断,请设置断点,然后打开&断点&选项卡。右键单击要使用的断点,然后单击&条件&。
  在&条件&对话框中,添加有效的 JavaScript 语句。运行代码时,如果该语句为 True,则代码将在断点处停止运行。例如,在下图中,当 oAudio.paused 属性为 False 时,代码将停止运行。
  你既可以使用单一条件,也可以通过使用逻辑语句根据更加复杂的条件进行断开。但请记住,变量和对象的作用域将是相同的,就好像在监视窗口中在断点处对其进行检查一样。如果使用某个不在作用域中的条件,则不会将该条件计算为 True。
  逐步执行代码
  当代码执行在某个断点处停止时,可使用导航按钮来继续执行函数 (F5)、全部中断执行函数 (Ctrl+Shift+B) 或逐语句执行函数 (F11)、逐过程执行函数 (F10) 或跳出函数执行 (Shift+F11)。当在断点处暂停执行或正逐步执行时,调试窗口实际上是模式窗口。
  正因如此,当再次与网页交互前,需要停止调试 (Shift+F5) 或继续执行代码 (F5)。如果你的网页似乎无法做出响应,则记住这一点是很有必要的。如果打开了多个窗口,而调试程序没有位于顶部,则它可能正在断点上等待响应。如果发生这种情况,请在调试窗口找到相应的网页并按&F5&继续执行代码,或按&Shift+F5&停止调试以将控制权归还给网页。
  使用&监视&和&局部变量&选项卡监视变量
  使用&监视&选项卡,可以在代码中设置并监视变量。其中将会列出指定的变量的名称、值和类型。可在&监视&选项卡中单击标记为&单击以添加...&的行,并键入变量名称。如果不想键入变量名称,则可将其复制并粘贴到&监视&列表中。
  监视变量列表将显示你是否正在调试代码的值。打开调试并跟踪代码或已设置断点时,列表中变量值的作用域就是你在脚本中所处的位置。如果关闭调试,则作用域为全局,并且只有全局变量才会显示值。
  与&监视&选项卡(显示变量是否超出作用域)不同,&局部变量&选项卡视图仅显示当前作用域中的变量。你无需添加要监视的变量,因为它会随着作用域的更改更新所有可用的变量。
  若要查看不同之处,请在 Internet Explorer&9 中打开以下示例并按照步骤操作。
&!DOCTYPE html&
&title&JavaScript debugging example&/title&
&script type="text/javascript"&
//create a global variable for our &div&
function init() {
//initialize only after the HTML has been loaded
display = document.getElementById("results");
function firstParam() {
//set breakpoint here
var a = 5;
secondParam(a);
function secondParam(a) {
var b = 10;
thirdParam(a, b);
function thirdParam(a, b) {
var c = 15;
var d = a + b +
//display to console if F12 tools is open
if (window.console && window.console.log) {
window.console.log(a + " + " + b + " + " + c + " = " + d);
display.innerText = a + " + " + b + " + " + c + " = " +
&body onload="init();"&
&p&&button onclick="firstParam();"&Run&/button&&/p&
&div id="results"&&/div&
在 Internet Explorer&9 中,加载示例。
按&F12&打开 F12 工具,并单击&脚本&选项卡
在左侧窗格中,滚动到第一个函数,右键单击内容为 "var a = 5;" 的行,然后单击&插入断点&。
function firstParam() {
//set breakpoint here
var a = 5;
secondParam(a);
单击&开始调试&,然后在浏览器中的网页上,单击&运行&按钮。
在 F12 工具中,单击右侧的&监视&选项卡,然后添加变量 "a、b、c 和 d"。
通过按&F11&逐步执行代码,或者单击&单步执行&按钮,并监视&监视&选项卡上的变量。
  在逐步执行每个函数时,应看到监视的值会从未定义更改为某个值。
  若要通过&局部变量&选项卡查看差别,请按&F5&继续使用 F12 工具。在浏览器中,单击网页上的&运行&按钮以重新运行代码,并返回到 F12 工具。 在&脚本&选项卡的右侧窗格中,单击&局部变量&选项卡,并按&F11&以再次逐步执行函数。在局部变量列表中,请注意其中仅列出了包含值的变量。 &局部变量&视图还将显示传递到某个函数的参数、参数值以及类型。
  查看调用堆栈
  使用&调用堆栈&选项卡,可以查看从你的代码中调用函数时所采用的路径。这可帮助你作为 Bug 发现意外的代码路径。 通过&调用堆栈&选项卡中,可双击任意函数,并转到源代码中相应的调用。
  尝试前面所提到的示例,并在跟踪函数时,查看&调用堆栈&选项卡。
  在&调用堆栈&选项卡中,当前函数或位置总是位于顶部(在&调用堆栈&选项卡中和代码页边距中,箭头指向的位置)。双击列表中的任意函数时,将突出显示调用该函数的语句。
  调试多个脚本
  大型网页通常包含多个 JavaScript 文件。使用 F12 工具,可以在调试代码时对多个脚本文件进行操作。若要查看不同的文件,请单击&开始调试&按钮旁边的向下箭头,以显示与网页关联的脚本的列表。使用 F12 工具逐步执行代码时,F12 工具将遵循跨越多个文件的执行路径。你可添加变量以从任意脚本文件中进行监视,&调用堆栈&视图将显示跨不同脚本文件中所包含的函数的执行路径。
  更改文档模式设置
  &菜单&栏右侧的&文档模式&设置可以用于 F12 工具的任何选项卡,但在&脚本&选项卡中调试代码时尤其有用。使用 Internet Explorer&9,可以更改文档模式以模拟早期版本的 Windows Internet Explorer 的标准。在 Internet Explorer&9 中,停止使用 &!doctype& 声明会导致将文档类型默认设置为 Quirks 模式。使用新功能或标准功能(例如 HTML5&&或)时,有些可能看起来是编码错误的 Bug 实际上是缺少文档类型声明或文档类型声明不正确造成的。
  Internet Explorer&9&F12 工具无法为你修复代码,但它可以使查找 JavaScript 错误更容易一点。
阅读(...) 评论()
var ME = {
"name": "土豆/Artwl",
"job": "coding",
"languages": [
"JS", "HTML",
"CSS", "jQuery"
"MVC",".NET",
"设计模式"
"hobby": [
"阅读", "旅游",
"音乐", "电影"十几年了,每次抢修都这样。心疼他,但用水更重要。
在一个包房里,李女士找到了正在写作业的两个孩子。
声明:本文由入驻搜狐公众平台的作者撰写,除搜狐官方账号外,观点仅代表作者本人,不代表搜狐立场。
  IT之家讯 7月22日消息,“F12开发人员工具”是很多浏览器必备的调试功能,适用于专业人士。在Win10全新Edge浏览器中,同样加入了该功能。开发人员可以通过这一功能调试网页,测试网页的运行情况。
  最近Edge浏览器开发团队更新了工具中的部分内容,具体如下:
  ? 改进CSS编辑工作流程
  ? Cookies
  ? 网络存储
  ? 试验功能
  值得关注的是,在这次更新中包含了第一个实验项目: 编辑 Java。打开这一开功能后,开发者可以在调试者资源视图中对Java文件进行编辑。
  微软在博客中较为详细地阐述了本次更新内容,可点击这里进入查询。
  关注Windows10,锁定Win10之家()
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
IT之家是业内领先的即时IT资讯和数码产品类网站。IT之家...
24679文章数
主演:黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演:陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演:陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演:尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演:艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线:86-10-
客服邮箱:查看: 689|回复: 3
阅读权限50UID28224精华0主题帖子积分640注册时间最后登录
四级会员, 积分 640, 距离下一级还需 360 积分
积分640金币168 铜钱697 威望8
新会员上传图片被限制?解决办法请查看“!”
Windows 8.1 和 Windows 7 中的 Internet Explorer 11 带有一组内置的开发人员工具,我们对这些工具进行了颠覆性重新设计和增强,可以帮助开发人员跨多种设备来构建、诊断和优化现代网站和应用。我们将这一组全新工具简称为 F12,这些工具可帮助 Web 开发人员快速、高效地完成各项工作。
F12 由 Visual Studio 团队和 IE 团队密切合作构建而成,旨在为开发人员提供可操作的数据,帮助开发人员快速找出并解决问题。全新的 F12 包含用于诊断和修复性能问题的工具以及帮助您深入了解 IE 如何布局和呈现您的应用的工具,可以帮助您提供快速而流畅的 Web 体验。F12 支持现代 Web 开发人员所使用的快速、迭代工作流。
综合性工具集
全新的 F12 可以帮助开发人员快速找出并解决问题。最重要的一些新功能如下:
UI 响应能力及内存分析工具,可帮助您构建快速而流畅的 Web 应用
动态 DOM 资源管理器和 CSS 检查工具,它们随页面更新,因此您可以反复检查动态内容如何影响布局和样式
JavaScript 调试,它无需刷新页面即可快速启动,因此您可以更快地投入工作
使用过 F12 之后,您会发现可帮助您提供快速、迭代工作流的更多增强功能:
通过 [inspect element](检查元素)右键菜单项快速启动工具
通过键盘来执行工具操作
完美复制工具中的元素和项目并将其粘贴到所选择的编辑器中,而无需重新设置格式
最重要的是,这些工具现在可以显示最精确的综合性信息,从 DOM 资源管理器中的 @media 规则和 !important 到 UI 响应能力分析工具中每个元素的布局开销,均能全面囊括。该工具还提供可直接操作的数据;例如,内存分析工具可识别未被标记或渲染树引用的所有活动 DOM 节点。
全新的 F12 与 Visual Studio 共享其中的众多体验,因此开发人员可以在 Microsoft 的 Web 开发工具和平台体系中获得一致的体验。
让我们来简略了解一下这些工具的功能。
使用 UI 响应能力工具分析应用
UI 响应能力工具可以帮助您了解哪些组件占用了 CPU 时间,从而帮助您最大限度地改善应用性能。该工具以可视化形式显示 HTML、CSS 和 JavaScript 的执行情况以及对布局和垃圾回收等方面的重要边际影响,帮助您深入了解 IE 的内部工作情况。您可以高屋建瓴地准确了解您的应用的响应性以及呈现的流畅性。从而识别出影响应用性能的具体原因,更加有针对性地对应用进行优化。
使用内存分析工具了解应用的内存消耗情况
内存工具可以帮助您避免内存泄露或内存的过度消耗。要构建可供消费者长期运行的 Web 应用或复杂的交互式应用,您必须重点关注应用的内存使用情况。
尽管 JavaScript 具有完善的垃圾回收环境,但如果应用引用的对象未能及时释放或无法释放,通常会导致应用消耗过多的内存。内存工具可以显示页面中每一个对象的相关信息,无论该对象是 JavaScript 对象还是 DOM 对象,从而帮助您发现这些问题。例如,利用这些信息,您可以查看 &img& 占用了多少内存以及哪些对象使其处于活动状态。最佳做法是,您可以比较两个快照之间的差异,定位发生变化的点,从而找出应用占用过多内存的原因并予以修正。
显示已断开连接的 DOM 元素的堆快照
使用性能仪表板即时查看应用性能
为了帮助您快速识别正在运行的页面中的性能问题,IE11 配备了一个名为性能仪表板的页面小组件,您可以通过 Ctrl+Shift+U 或通过“工具”(Alt+T) 菜单选项来访问性能仪表板。性能仪表板在 IE 中绘制呈现,可提供关键性能指标(例如,绘制时间、内存、每秒帧数 (FPS) 和 CPU 使用率)的实时统计信息。性能仪表板不需要 F12,也可以在沉浸式浏览器中使用。
利用性能仪表板,您可以快速识别导致帧率下降或 CPU 使用率提高的页面交互操作。然后,您可以切换到 F12 工具重现该问题并找出解决方法。
使用 DOM 资源管理器检查元素以及修改布局和样式
DOM 资源管理器可以简化交互过程,优化 @media 查询和 CSS 规则及其属性,确保您的应用的 UI 能够跨多种设备正常工作并作出响应。通过右键单击网页中的元素可以快速对该元素进行检查,此时将启动 F12 并在 DOM 资源管理器中显示所选择的元素,并实时显示 DOM 和应用的 CSS 规则。所显示的 DOM 和 CSS 均为实时信息,因此您可以了解 IE 如何具体解释您的标记、样式和 CSS 规则。在与页面进行交互或通过 DOM 资源管理器编辑页面之后,所做的更改会立即反映到页面中。
检查标记和样式
对 CSS 进行更改后,DOM 资源管理器可以利用 IntelliSense 轻松地确定正确的属性或属性值。您可以轻松辨别哪些属性存在错误或无法识别,然后复制规则并应用到源代码中。
使用调试器和控制台调试 JavaScript
全新的 JavaScript 调试器为您提供了快速查找并修正易于出错的代码的工具。JavaScript 调试器可以打开和查看多个文件(即使您的库脚本已进行了压缩也可查看),设置断点和跟踪点,检查 JavaScript 对象、值、作用域链,并查看堆栈跟踪。在启动 F12 时会立即启动 JavaScript 调试器,以便您能够立即开始工作。
在调试过程中,您可能希望与您的网站进行交互。控制台是执行此操作的关键工具。您可以随时访问控制台并使用交互式环境,该环境包含 IntelliSense 和大量可视化工具。控制台还提供了各种专用 API,您可以利用这些 API 来记录输出信息,了解特定代码所花费的时间;当您需要对 JavaScript 对象进行深入检查时,还可以使用控制台提供的对象可视化工具。
本博文只是对 F12 中的新增功能进行了简要介绍。请参阅 IE11“F12 工具新增功能”和 IE11“Preview 开发人员指南”,了解面向开发人员的新功能的完整列表。您还可以观看“F12 Adventure”IE 体验演示了解更多信息。
请通过 Windows 应用商店安装 Windows 8.1 Preview 并试用 IE11 (),或者试用 IE11 Developer Preview for Windows 7。
我们期待收到您的反馈并与开发人员社区互动。请通过 IE11 的“发送反馈”工具或者在 Connect 上提供建议或意见。
阅读权限150UID21692精华0主题帖子积分5352注册时间最后登录
积分5352金币4221 铜钱5591 威望17
Win8之家频道推荐 :
IE 11 用着累!改谷歌浏览器了。
阅读权限150UID70精华0主题帖子积分10042注册时间最后登录
积分10042金币8177 铜钱2284 威望50
新会员上传图片被限制?解决办法请查看“!”
一直用搜狗的~~
阅读权限100UID47366精华0主题帖子积分17918注册时间最后登录
积分17918金币12524 铜钱6629 威望151
Win8之家频道推荐 :
而我一直用hao123觉得很好。
在论坛签到88天以上即可获得签到达人勋章!
感谢八级会员和Win8论坛一路相伴!
长期活跃于论坛周帖数在排行榜前八即可申请!
感谢各位热心帮助大家解决各种问题!
献给为论坛建设有突出贡献的版主们!
感谢为论坛做过贡献的版主和会员!
日你还存在,就来领取末日勋章
( 闽ICP备号 )&&
Powered by Discuz! X2. &
Comsenz Inc.
请勿发表违反国家法律法规的言论,如有侵权内容请联系我们删除.

我要回帖

更多关于 f12开发人员工具下载 的文章

 

随机推荐