Google Chrome Developer Tools

The Google Chrome Developer Tools can be accessed in the following ways:

• Within Google Chrome, open the Chrome menu at the top right of the browser window and select 'Tools' > 'Developer tools'
• While focused on a web page in Google Chrome, press 'F12' on your keyboard
• While focused on a web page in Google Chrome, press 'Ctrl' + 'Shift' + 'i' on your keyboard
• Within Google Chrome, right-click on a web page and select 'Inspect element'

By default the Developer Tools will open in a panel at the bottom of the Google Chrome window, however you can also get it to open in a panel on the right of the Google Chrome window, or in a separate window, by using the icon at the bottom left corner of the Developer Tools panel.

Once open, the Developer Tools offer a wide range of features that allow you to interact with various components of the web page, such as the HTML, CSS, and JS, as well as viewing cookie and other resource information, network traffic, and access to the JavaScript console.

When it comes to styling iEBMS pages, one of the most useful tools is the ability to right-click on any element on the web page and select the 'Inspect element' option.  This will then open the Developer Tools, and the element that you clicked on will automatically be selected within the Developer Tools.  On the left you will see a tree showing all of the elements on the page, as well as any attributes that they may have, such as their CSS Class.  On the right will be a list of the different CSS properties that are being applied to this element and you can turn these properties on and off, or edit their values, to see how they affect the elements on the web page.  You can then use this information to update your iEBMS Presentation Stylesheets to change the way that your iEBMS pages appear.

For more information about the Google Chrome Developer Tools, please visit: https://developers.google.com/chrome-developer-tools/