Developer tools console commands

Each call to count is uniquely identified by the optional title. The existing entry in the console window is identified by the title parameter if present and updated by the count command. A new entry is not created. Sends message to the console window. This command is identical to console. Objects that are passed by using the command are converted to a string value. Sends the specified object to the console window and displays it in an object visualizer. You can use the visualizer to inspect properties in the console window.

The message text is red and prefaced by an error symbol. Starts a grouping for messages that are sent to the console window, and sends the optional title as a group label.

Groups can be nested and appear in a tree view in the console window. Groups that are sent by using groupCollapsed appear in a collapsed view by default. Usage is the same as the group command. See the example for the group command. The message is prefaced by an information symbol. If you pass an object, this command sends that object to the console window and displays it in an object visualizer. For more information about all the ways to work with Console , see Console as a JavaScript environment.

The Console has access to the Window object of the browser. You can write scripts that interact with the current webpage. Copying the top heading h1 content from the DOM and displaying the expression evaluation result in the Console :. Instead of only reading from the webpage, you can also change the page.

To try changing the webpage:. You changed the main heading of the webpage to Rocking the Console. The Console Utility methods make it easy to access and manipulate the current webpage.

Skip to main content. This browser is no longer supported. Download Microsoft Edge More info. Contents Exit focus mode. Please rate your experience Yes No. Once you've located the command prompt file, open it by entering the following command in a regular command prompt window:. The path changes according to your Visual Studio version, edition, and installation location.

The execution policy must be set in order for the cmdlet to run. Skip to main content. This browser is no longer supported. Download Microsoft Edge More info. Contents Exit focus mode. Please rate your experience Yes No. Any additional feedback? This is helpful when you're regularly changing the source or testing the server response. These settings provide tools that help you with common tasks.

You can do things such as test a page in different resolutions, measure elements on the page, and capture the specific color of a point on the page. Provides a submenu with a list of predefined screen sizes, and a custom size option.

When you pick a predefined screen size, the Internet Explorer window resizes to the new dimensions immediately. Preset screen sizes can be selected by using the shortcut keys shown in the submenu.

You can create your own custom screen sizes. To Add a custom screen size, do the following:. To use a custom size, open the Resize Browser dialog box, click a size, and then click Resize. The list of custom sizes persists across browser sessions until you delete them. New screen sizes aren't available to browser sessions that are already open when you add the custom size. Lets you change the way Internet Explorer appears to a website by changing the user agent string UA.

A submenu lists versions of Internet Explorer on the PC and Windows Phone, as well as several other brands of browsers. The custom setting lets you add and set your own UA strings. The friendly name is shown on the list of available UA strings. The Default setting returns the browser to its current default setting.

Lets you keep or clear console messages and the Network tab log when you navigate to a new webpage in a debugging session. By default, Internet Explorer clears all console messages, and the Network view capture logs when you leave a page.

Lets you to measure objects on the screen. The command opens the Ruler dialog box with options and hints for using the tool. Multiple colors and rulers are supported. After a ruler is drawn, it shows the x-y coordinates of each end of the ruler relative to where the points are on the screen.

The ruler length is shown at the center of the ruler in pixels. This information is also shown at the bottom of the Ruler dialog box when you hover over a defined ruler. A ruler can be moved, resized, or re-angled.

To remove a ruler, select it and press the Delete key. When done, click the X button at the upper-right corner to close the dialog box. When the dialog box is closed, all rulers are hidden. They reappear when you reopen the Ruler dialog box. The color picker tool can sample colors from any object on the page. To see a color value used on a webpage, click the color of interest with the eyedropper cursor.

To pick a different color sample, click the eyedropper icon on the dialog box and repeat the previous step. Click Copy and close to copy the HEX value to the clipboard for use in your webpage. Click the X button or Hide color picker on the Tools menu to close the dialog box. Helps you understand and debug page layout by making it easy to identify the size and position of elements. You can set a color to identify all elements of a certain element type.

Use CSS selector syntax to specify elements on a webpage. For example, to highlight all paragraphs, use p in the selector field, and set a color. Elements are outlined after you close the dialog box. This tool validates the current webpage or file using web-based validation services. You get a confirmation dialog box before sending your current page to the web, letting you cancel without sending.

Validation reports open in a new window so you don't lose the page you're debugging. You can run one or more validation checks in a single request. Select the type of validation you want, and then click OK to start the request.

You'll only get one confirmation dialog box regardless of how many validations are selected. Each selection opens in a new tab and contains the resulting validation report.

The Browser Mode menu allows you to test how your page appears and behaves for users running Internet Explorer 10 and earlier versions of Internet Explorer. When you first load a webpage, F12 tools determines the default Browser Mode and selects the appropriate mode.

A check mark appears next to the current mode of the document. Changing the mode causes the webpage to refresh. The page remains in this mode until another mode is chosen or you close the browser. When you first load a webpage, F12 tools determines the default Document Mode and selects the appropriate mode. The text Page default in parentheses indicates the default mode of the webpage.

Changing the mode causes the webpage to refresh, and remains in this mode until another mode is chosen or the browser is closed. The primary pane left side and details pane right side provide views of HTML, CSS, or Script source, or status and reports for the console, profiler, and network views. In HTML view you can edit the source in the left pane. You can resize the viewable area of the left and right pane by moving the divider bar between the two views. When the view changes, so does the toolbar and the details view.

The following tables describe the views, details, and toolbars you can use. The HTML tab lets you to inspect your document sources and to make changes to test their effect. These changes can then be saved into a text file that can be used to incorporate new or modified material into the main site.

When a page first loads, or the Refresh button is clicked, the tree view is collapsed. You can use the tree structure to drill down to the element you want to inspect, or use Select element by click to find the element within the document for you. You can click on any attribute name or value to edit it directly. When you click an element, the properties associated with it show in the right pane. The CSS tab shows the content of the currently selected style sheet and helps you see the effect style sheets have on a webpage especially with multiple style sheets where rules can overlap.

Use the View styles drop-down list to switch between style sheets. The check boxes let you to enable and disable specific properties or entire rules. When the style rule's check box is checked, all properties of that rule are enabled. When cleared, the all properties of that rule are disabled. Each property also has its own check box to turn that property on or off. Click a property name or value to edit it. Press "Enter" to accept and apply changes immediately.

Note For numeric properties, you can click the value and use the up and down arrow keys to change the value like a spin control.

The F12 tools console tab offers a full width view of the same information you see in Script view, where you see the Console view in the right pane.