The developer console (called Web Inspector in Safari) is a helpful tool which provides additional information to web pages and other HTML-derived document types, including (rendered) markdown. It can be helpful when you test your own CSS stylesheet for markdown notes, or troubleshoot an anomaly in a captured web archive, among many other things.
The developer console is normally built into a web browser. To benefit from the console, you must convert your .md document to HTML and open it in a browser… or is that really the case?
Here’s how to toggle Safari Web Inspector on a document opened within DT:
- Open the document in DT.
- Open Safari. In Safari’s Setting > Advanced, toggle on “Show features for developers”.
- Locate “Develop” in the menu bar of Safari.
- In the dropdown menu, you can see an item with a gigantic computer icon. Hover on it. A list of all items eligible for inspection would pop up on the right side.
- Click the document you want to inspect. You should now see the familiar console window.
The document must be of an HTML-based file type. That includes HTML itself, markdown, web archive, ePub, among other things. The Inspector is available only when the document is opened in a rendered view, which for markdown means either Preview or Side-by-Side.
A side note: This is possible because the console has been made available to third-party apps using the WebKit framework.
