F12 from inside the browser within Office Online

Visual Studio - JavaScript Console

Review logged events and errors that occur within your app. This feature is also available in the Debug menu, but only when the app is running.
Just like the console available in the developer tools of most browsers, the JavaScript console can be used to log events and receive immediate feedback when they occur, as well as capture and output any errors that occur during execution.

Visual Studio - Page Inspector

Renders a preview of the HTML in your source.
Visually inspect how a page will render without having to leave Visual Studio.
You can use this feature to see a live version of the markup in real-time against your markup and code.

Inspector tool button
Any selections made are immediately synchronized in the Page Inspector itself, the HTML DOM and CSS definitions below, as well as your source HTML file, allowing you to trace elements and issues with the click of a button. Changes made to your source are then immediately reflected in the inspector, allowing you to fix errors on the fly without having to launch and refresh the application.

Visual Studio - DOM Explorer

Represents a live rendered HTML of the page that is running.
Allows you to perform similar inspection of the page while the app is running live inside Office.
Once you launch your app, simply toggle back to Visual Studio and from the Debug menu select Windows > DOM Explorer and then select the appropriate page from the menu.
Good for debugging layout and style issues.

Inspector Tool button
When selected allows you to focus elements, this time in the live app. Any selections you make will then be automatically highlighted in the DOM Explorer.

Element Highlighting
By toggling this option, any selection made in the explorer will also be highlighted in the App. This makes it easier to identify and focus problematic areas.

However, remember that here you are updating the live rendering of the app, not the original HTML, so these changes will NOT automatically be saved to the original source file.

Visual Studio - Browser

Once you have removed all references to the Office app and API, you can right-click the project and select the option to View in Browser. This will launch the Visual Studio web server and serve the page as a regular web site, giving you full access to the entire suite of browser tools and extensions to troubleshoot any issues.

Chrome - Developer Tools

But what if you really need a feature from one of the browsers such as the Chrome Developer Tools or browser add-ons such as Web Developer Tools and Kendo UI Chrome Inspector?

Browser - Addon - Web Developer Tools

Browser - Addon - Kendo UI Chrome Inspector

Security / Permissons

Content and taskpane assume the same SSL settings that Internet Explorer uses by default
IE - security tab, internet options, internet, custom level
Scroll to "display mixed content" - select prompt

IE - security tab, internet options, advanced tab
warn if changing between secure and not secure mode

© 2017 Better Solutions Limited. All Rights Reserved. © 2017 Better Solutions Limited