This is a PDF version of Article CS273018 and may be out of date. For the latest version click here
Article - CS273018

How to use Chrome DevTools with Embedded Browser to troubleshoot in Chrome console

Created: 26-Oct-2017   |   Modified: 14-Dec-2017   

Applies To

  • Creo Parametric 3.0 to 5.0
  • Windchill PDMLink 10.2 to 11.1
  • Windchill ProjectLink 10.2 to 11.1
  • Pro/INTRALINK 8.x + 10.2 to 11.1
  • Windchill PDM Essentials 10.2 to 11.1
  • PTC Arbortext Content Manager 10.2 to 11.1
  • Windchill Workgroup Manager 11.0

Description

Introduction to Chrome Developer Tools
  • Google Chrome browser comes with a built-in Developer Tools similar to IE's Developer Tools. It is very versatile and has a lot of capabilities.
  • On a stand alone Chrome browser it can be accessed from Chrome menu at the top right of the browser window, then Tools->Developer Tools. Short cut key is Ctrl+Shift+I
User-added image
  • The Developer tools panel becomes visible docked on the bottom of the window. Can be undocked as separate window if desired.
User-added image
  • Chrome DevTools provides DOM tree inspection and manipulation, network traffic log, script sources inspection and debugging, timeline event logging, profiling, console, audits, list of page resources.


Creo 3.0 / WGM 11.0 Chromium Embedded Browser Framework browser
 
With Creo Parametric 3.0 or above / WGM 11.0, there are two embedded browsers supported:
  • Internet Explorer
  • Chromium Embedded Framework (CEF) based browser
    • CEF based browser is an embedded browser that is based on same open source project as Google Chrome does.
    • CEF provides IP port based remote debugging capability, which opens up the functionality of inspecting, manipulating, debugging embedded browser just like a stand alone Chrome browser using Chrome DevTools