Use Chrome Developer Tools for AIQ Troubleshooting

The

Use Chrome Developer Tools isfor aAIQ debuggingTroubleshooting

tool built into Google

Use Chrome Browser. The DevTools provide the user deep access into the internals of the browser and their web application.

Accessing the DevTools:

To access the DevTools, open a web page or web app in Google Chrome. Either:

Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools. Right-click any page element and select Inspect Element.

The DevTools window will open at the bottom of your Chrome browser.

Inspecting the DOM:

The Elemets panel lets you see everything in one DOM tree, and allows inspection of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page.

 

DOM:

The DOM tree view displays the DOM structure of the current web page. The DOM tree is a tree of DOM nodes that represent individual HTML elements, such as <body> and <p>. For ease of reading, the DOM tree view displays the HTML element tags instead of the DOM node types: for example, <p> instead ofHTMLParagraphElement.

Inspecting elements:
There are several ways to inspect anapplication element:
•behavior Right-clickduring anytroubleshooting, elementbut rely on theAIQ pageexecution output and logs for repeatable test evidence.

Recommended guidance

• Use DevTools for local diagnosis of network, console, DOM, and performance symptoms.
• Do not require manual DevTools steps for automated Scenario Editor execution.
• Avoid capturing secrets, tokens, or personal data from network traces.
• Translate findings into stable locators, waits, validations, or environment fixes.

Validation workflow

1. Reproduce the pageissue andin selecta controlled browser session.
2. Inspect Element.
   •console, Clicknetwork, DOM, or performance signals as needed.
3. Update the InspectAIQ Elementscenario buttonor atenvironment based on confirmed findings.
4. Validate the topfix ofwith thea DevToolsfresh windowAIQ to go into Inspect Element Mode, then click an element.execution.

Working with the Console:
The JavaScript Console provides two primary functions for the user testing web pages and applications. It is a place to:
• Log diagnostic information in the development process.
• A shell prompt which can be used to interact with the document and DevTools.
You may log diagnostic information using methods provided by the Console API. Such as console.log()

Network:

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.