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

最新文章

  1. ABP源码分析二十八:ABP.MemoryDB
  2. Hive基本语法操练
  3. Immutable api example
  4. HTML第一节课
  5. Hermes实时检索分析平台
  6. web首页设置如下代码可判断用户是用什么设备登录的?
  7. IOS AutoLayout 遍历修改约束
  8. UIWebView 获取当前的javascript上下文,并js,oc互调
  9. c/c++面试总结(3)
  10. thinkphp3.2入口文件
  11. 浅谈 IE下innerHTML导致的问题
  12. BZOJ 1076: [SCOI2008]奖励关(概率+dp)
  13. USACO08MAR Land Acquisition
  14. SpringBoot学习笔记(一)入门
  15. UVA1609-Foul Play(构造+递归)
  16. ruby数组操作方法汇总
  17. spring-boot-2.0.3应用篇 - shiro集成
  18. JavaScript 数组复制的方法
  19. pig cookbook学习
  20. 关于SpringKafka消费者的几个监听器:[一次处理单条消息和一次处理一批消息]以及[自动提交offset和手动提交offset]

热门文章

  1. IOS控件:分歧解决其(UILabel 和 IBAction)
  2. 一个有意思的 Java HashSet 问题
  3. 容器OOM相关
  4. HTML布局四剑客-Flex,Grid,Table,Float
  5. Pycharm如何修改背景图(BackgroundColor)
  6. Docker Libnetwork Bridge插件实现代码分析----初始化部分
  7. Linux network 资料链接
  8. Linux(6)- redis发布订阅/持久化/主从复制/redis-sentinel/redis-cluster、nginx入门
  9. JS的深拷贝
  10. 微信小程序学习笔记(2)--------框架之目录结构