One of the IE debugging webpages: F12 Developer Tools

F12 developer tools are a set of tools that can help generate and debug web pages.

Coding knowledge and appropriate tools are required to compile excellent web pages to discover and debug problems. Windows Internet Explorer 9 providesCodeThe F12 tool provides Internet Explorer 9 on how to explain the views of these pages at the code level. The F12 tool also helps identify and report information about elements on the page, such as links and image reports.

Functions of the F12 Tool

When analyzing HTML code, the view displayed through the F12 tool is the actual way that the object model (DOM) of Internet Explorer 9 explains the page, not the originalSource code. This is an important difference. Because of the representation, it is best to refresh the HTML option card to obtain the current Dom, especially when using dynamic elements.

The HTML tab displays the dynamic markup of the webpage in the Tree View. This is different from the initial source code. In the initial source code, it reflects how Internet Explorer 9 interprets the initial markup Code and any changes made to the DOM after the page is loaded. This view needs to be updated regularly to reflect any latest changes made to the Dom.

For example, if you use a script to generate a webpage, the source cannot display the content actually displayed to the user. If you use the original source code, it may take some time to discover the HTML or Cascading Style Sheet (CSS) CSS rendering bug. However, if you use the F12 tool, the actual code explained by Windows Internet Explorer in the Dom is displayed.

The following example demonstrates this behavior. The following code example shows the source code and the generated code explained by Internet Explorer when an element is dynamically created on the webpage.

Html

<!  Doctype HTML public  >  <  Html  >  <  Head  >      <  Script  Type  = "Text/JavaScript"  >          Function  Makepage (){ For  (  VaR  I  =   1  ; I  <   10  ; I  ++  ){ VaR  Mychild  =  Document. createelement (  "  Div  "  );  VaR  Mydiv  = Document. getelementbyid (  "  Mycount  "  ); Mychild. appendchild (document. createtextnode (  "  Number:  "   + I); mydiv. appendchild (mychild );}}  </  Script  >      <  Title  > Dynamic page sample </  Title  >  </  Head  >  < Body  Onload  = "Makepage ();"  >  <  H1  > Dynamic page sample </  H1  >  <  Div  ID  = "Mycount"  > </  Div  > </  Body  >  </  Html  > 

When you use Internet Explorer 9 to present the previous example, it looks similar to the following screen. This page displays a group of "<div>" elements with text (9 in total ).

When viewing the source code (right-click in the browser window and click "View Source File"), you can only see the first "<div>" tag used as the parent element, you cannot see any other content.

However, when viewing in the HTML tab, you will see the parent tag ("<div>") and other "Div" elements and text added by the script. When using and changing the script code, press F5 to refresh and obtain the current Dom view.

Open the F12 Tool

You can use the F12 tool on any page viewed in Internet Explorer 9 by pressing F12 or clicking the tool button and then selecting "F12 tool ". The F12 tool is opened in a separate window, but you can click the fix button or press Ctrl + P to fix it to the page in use. Note that this window cannot be fixed when debugging is performed on the script tab (You have clicked start debugging.

If you do not need a complete tool interface, you can clickMinimizeOr press Ctrl + M. These tools are displayed as a line at the bottom of the window to provide access to the "command menu" bar.

Navigate the webpage and code in the F12 Tool

F12 tools are generally divided into two areas: pages, visualization tools, and code-level or debugging tools.

In most cases, the main menu or shortcut key is used to access the page and visualization tools. These tools can complete some tasks, such as creating reports for all links in the document or providing a visual overview of a specific element on the page. For more information about using pages and visualization tools, menus, and buttons, see getting started with F12 Developer Tools.

Code-level tools can be accessed through six dedicated tabs, which provide HTML, CSS, and script debugging, code analysis, and network traffic capture functions. The "console" tab provides methods for receiving and viewing messages. You can use console commands to send these messages from the code.

For more information, see the following topics:

• Use the F12 developer tool console to view errors and status
• Network capture using Internet Explorer Developer Tools

Many tools and options in the F12 tool are context-related, that is, the options are changed when you change the tab. Some features are available for all tools. The following tips and tips help you get started with these tools.

Change features and variables

From most views of the F12 tool, you can click Properties and variables to change the value, and then type a new value. On the CSS tab, you can select or clear the check box to switch between styles and rules.

Search item

You can enter a specific tag, ID, element, variable, or string in the search box, and then pressEnterSearch for corresponding items in the webpage code or details (such as the extended list of properties on the script tab. All items found are highlighted in the current view. You can search for all items except the console tab or the console view on the script tab. For the network tab, if you are in the summary view, the Details View is displayed and the search results for all categories are displayed. On the "scripts" tab, you can also search for all script files to be used on the page, not just the script files to be displayed.

If there are multiple hit results, you can pressEnterOrShift + enter, Or click "Next" or "last" to navigate between these results.

Click Select Element

To search for specific elements in a large DOM tree, you can select each element in the browser and highlight them on the HTML tab of F12. In the F12 tool debugging window, click "Click Select element" or pressCTRL + BTo highlight the elements on the webpage when hovering over the page. When you click a highlighted element, the HTML tab opens and scrolls to the selected element in the Code pane. In some cases, you may need to refresh the HTML tab to see this element.