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. 【BZOJ4773】负环 倍增Floyd

    [BZOJ4773]负环 Description 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得 环上的边权和为负数.保证图中不包含重边 ...

  2. 【BZOJ3714】[PA2014]Kuglarz 最小生成树

    [BZOJ3714][PA2014]Kuglarz Description 魔术师的桌子上有n个杯子排成一行,编号为1,2,…,n,其中某些杯子底下藏有一个小球,如果你准确地猜出是哪些杯子,你就可以获 ...

  3. 【IDEA】重装基本设置+插件安装

    基本配置:2.1 显示:2.1.1.选中展示Toolbar2.1.2.显示内存占用:2.1.3.显示行号和方法线:2.1.4.代码软分行:2.2.修改快捷键:2.2.1 修改Ctrl + D 快捷键: ...

  4. Android 点击电话号码之间拨号

    点击电话号码之间拨打电话,可用通过下面的方式实现: 假设电话号码以TextView的方式显示 1.Intent方式 在TextView的响应事件中 : String phone = tvphone.g ...

  5. Converts Internet addresses to Internet numbers. ip2long long2ip

    http://php.net/manual/en/function.long2ip.phpPHP: ip2long - Manual http://php.net/manual/en/function ...

  6. Druid对数据库密码加密的坑

    背景: 在对已有项目搭建本地环境,修改了本地ip端口和数据库帐号密码(使用了明文). 然后项目一直跑不起来,还抛出各种异常,经过分析发现主要错在这里:druid java.lang.IllegalAr ...

  7. Java 面向对象编程介绍

    面向对象的概念 类与对象的关系 封装 面向对象 面向过程: 强调的是过程(动作) 面向对象: 强调的是对象(实体) 面向对象的特点 面向对象就是一种常见的思想,符合人们的思考习惯; 面向对象的出现,将 ...

  8. java获取当前路径&读取当前目录下文件

    项目目录如下: test1.class中读取test.txt import java.io.*; import java.util.Scanner; public class Test1 { publ ...

  9. celery中的生产者消费者问题

    celery中的生产者消费者问题 在task1.py文件中: # demo1:task.py and celery.py in one file# run it byfrom celery impor ...

  10. django模板之导入与继承

    组件 母版 子模板继承 2.静态文件相关 {% load static %} <link rel=-dist/css/bootstrap.css %}> <link rel=&quo ...