The DOM Explorer tool (CTRL + 1)

The The DOM Explorer tool shows the structure of your webpage as it's being rendered in the browser and makes it possible to edit your HTML and styles in a live page. You can do this without having to edit and reload your sources, so you can quickly solve display issues or experiment with new ideas.

New features in the DOM Explorer tool include:

  • IntelliSense autocompletion suggestions when editing HTML attributes and CSS properties.
  • Drag DOM nodes to rearrange them.

Development and debugging tasks it makes easier:

  • Determining why an element is not displaying at the right place or right size.
  • Figuring out which CSS styles and media queries are being applied to an element.
  • Testing a series of different colors for an element to see which looks best.

New features in the DOM Explorer tool in Windows 8.1 Update 1 include:

  • The pseudo-class toggle shows your styles in hover and visited modes by simply checking a box.
  • The Trace and Computed panes are combined, making room for a new Changes pane that tracks the changes you've made to styles via the DOM Explorer.

New features in the DOM Explorer tool in Cumulative Security Update for Internet Explorer (KB2976627) include:

  • The Computed pane features "change bars"; visual indicators that a style has been changed.
  • The new Color Picker tool makes it easy to select colors via an eyedropper, sliders, or a selection of presets.

Learn more about the DOM Explorer tool.

The Console tool (CTRL + 2)

The Console tool provides a way to interact with your running code, sending info in with the Console's command line and getting info out using the Console Debugging API. The Console tool is considered to be so useful by developers, we've made it easier to get to. You can now open it at the bottom of any other tool using the Console button in the upper-right of the UI, next to the Help button or CTRL + `.

New features in the Console tool include:

  • Open the Console at the bottom of any other tool with the Console button or CTRL + `.
  • New Console Debugging API methods for timing, counting, grouping, and more.
  • IntelliSense autocompletion suggestions on the command line speed up input, reduce typos, and help you discover aspects of JavaScript APIs.

Development and debugging tasks it makes easier:

  • Viewing system error messages, exception warnings, and debug output.
  • Timing code execution down to the statement with new timing methods.
  • Changing the value of a variable in running code without reloading.

New features in the Console tool in Windows 8.1 Update 1 include:

  • Target drop-down menu applies console commands to specific iFrames in your documents.
  • The Clear on navigate toggle gives you a control for preserving or deleting console messages after navigating to a new page.
  • An Always record developer console messages option means you no longer have to open the console to start capturing the output to it.

New features in the Console toolCumulative Security Update for Internet Explorer (KB2976627) include:

  • The console.timeStamp() command shows the number of milliseconds the current browser tab has been open, or it can be used with a UI Responsiveness profiling session to create time-stamps on the session timeline.
  • Stale message indication greys out the icons on console messages from previous pages when Clear on navigate is turned off, making it easier to spot just the current messages.
  • IntelliSense autocompletion is refined, removing indexer properties that cluttered the suggestions.
  • CTRL + L now clears the console.

Learn more about the Console tool.

The Debugger tool (CTRL + 3)

You use the Debugger tool to examine what your code is doing, when it's doing it, and how it's doing it. Pause code in mid-execution, step through it line-by-line, and watch the state of variables and objects at each step.

New features in the Debugger tool include:

  • No-refresh debugging. Set your breakpoints and go without reloading and losing state.
  • Tabbed document interface for easier management of multiple scripts.
  • Scrollbar that highlights breakpoints and search matches.

Development and debugging tasks it makes easier:

  • Seeing what led to a function call using the Call stack.
  • Making compressed or minified code more readable.
  • Monitoring web worker creation and execution.

New features in the Debugger tool in Windows 8.1 Update 1 include:

  • Source map support helps you trace errors in compressed code back to your more readable source files.
  • Just My Code helps you exclude 3rd party libraries from debugging tasks, so you don't find yourself stepping through someone else's unhandled exceptions while trying to debug your code.
  • Breakpoints and open files are preserved between sessions, so you can leave and come back without losing all that information.

New features in the Debugger tool in Cumulative Security Update for Internet Explorer (KB2976627) include:

  • Choose source map lets you specify a source map for a file when it hasn't been specified internally.
  • Breakpoints and tracepoints can be attached to events.
  • Asynchronous call stacks let you see related call stacks when broken in response handlers to more easily debug asynchronous calls.

Learn more about the Debugger tool.

The Network tool (CTRL + 4)

The Network tool gives you the fine details of any network requests involved in the loading and operation of your webpages.

New features in the Network tool include:

  • Improved request timing info.
  • Improved capture of compression info.

Development and debugging tasks it makes easier:

  • Viewing the amount of bandwidth your page consumes across resources.
  • Debugging AJAX requests by viewing request and response headers and bodies.
  • Identifying network requests that slow the loading of your webpages.

Learn more about the Network tool.

REF:

https://msdn.microsoft.com/library/bg182326%28v=vs.85%29

http://blogs.msdn.com/b/ie/archive/2013/07/29/debugging-and-tuning-web-sites-and-apps-with-f12-developer-tools-in-ie11.aspx

https://msdn.microsoft.com/library/bg182326(v=vs.85).aspx

IE开发人员工具手册的更多相关文章

  1. IE开发人员工具教程

    写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载 ...

  2. IE的F12开发人员工具不显示问题

    按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现 ...

  3. IE开发人员工具之实用功能讲解

    F12快捷键调出开发人员工具 一.JS的内容格式化 1.内容较乱的js脚本: 2.勾选下面两项即可进行格式化脚本:自动换行与格式化JS 3.调理清楚的脚本 二:清空控制台 1.右键->清空 2. ...

  4. IE的F12开发人员工具不显示

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  5. Chrome - 怎样独立窗口打开开发人员工具

    打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...

  6. 关于IE开发人员工具(F12)找不到的问题

    关于IE开发人员工具(F12)找不到的问题 解决方案:第一步,像往常一样F12或者,工具->开发人员工具,点击后,这个时候你是看不到工具界面(当然,如果你正好遇到了找不到这个问题);第二步,这个 ...

  7. IE8按F12不显示开发人员工具窗口

    转:http://www.cnblogs.com/micromouse/archive/2010/07/11/1775174.html 网上搜来的,记录一下,免得以后忘了 F12将开发人员工具启动后, ...

  8. EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  9. 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

    来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...

随机推荐

  1. TGI指数

    TGI指数 目标人群中国具有某一特征的群体占比/总体中具有相同特征的群体的占比*标准数100

  2. Oracle数据库命令行下数据的导入导出

    //设置导入导出字符集,导入导出都要设置一下 export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK //导出 exp system/oracle@orcl file=/u ...

  3. JS改变HTML元素的绝对坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  4. pdb

    core code: import pdb pdb.set_trace() 单步执行并进入:s 单步执行并不进入:n 下一断点:c 当前位置:where 从当前函数返回:r 退出:q pdb comm ...

  5. oracle入门(3)——oracle服务解释

    [本文介绍] oracle不像mysql,安装后之后一个服务,如果mysql连接不上,打开其服务就行.oracle是有多个服务,哪些服务要开,哪些服务没必要开,对新手来说未必不是一个难点.下面对ora ...

  6. 在Centos上打Preempt-rt实时补丁(续)

    经过上一篇,发现2.6.31版本的补丁不能正常运行(还未找到原因),现改用2.6.33版本: kernel:linux-2.6.33.9 patch:patch-2.6.33.9-rt 解压并打好补丁 ...

  7. HDU1158:Employment Planning(线性dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1158 这题又是看了题解,题意是一项工作需要n个月完成,雇佣一个人需要m1的钱,一个人的月工资为sa,辞退一 ...

  8. 简单的menu和点击(包括alertDialog定制)

    import android.app.Activity;import android.app.AlertDialog;import android.app.Dialog;import android. ...

  9. xpath(待补充)

    from lxml import etree html=""" <div> <ul> <li>1</li> <li ...

  10. 在python中打开文件显示没有权限PermissionError: [Errno 13] Permission denied:

    不多说了,我犯了低级错误 ,文件路径搞错了