How to Access the Web Inspector for Desktop iBooks

• Tweet
• Email
• Sumo

• Tweet
• Email

If you’re familiar with doing web development, you know one of the best tools in any web developers toolbox in the Web Inspector. It allows you to inspect the HTML and CSS of a live page, allowing you to debug any number of potential issues.

A few weeks ago, the Web Inspector tool was added to iBooks for Mavericks. Here’s how to get access to it.

First, here’s what you’ll need:

1. iBooks on a Mac with Mavericks
2. an iBooks book without DRM (the Web Inspector will only work for books without DRM applied)
3. Terminal (yes, I know, sorry. The good news is that its really easy).

Installation and Usage

1. Open Terminal
2. in the Terminal window, copy and paste the following line:
   defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES
3. Hit Enter
4. Now, open up iBooks (if you had iBooks open previously, you might want to restart it just to be safe)
5. Open you DRM-free book.
6. Select some text.
7. When the highlighting menu appears, at the bottom to the Menu you should see an option labeled “More.” When you hover over that option, a new menu will pop up. At the very bottom of that list you will see “Show Inspector.” Click that. (see screenshot above)
8. Your Web Inspector will appear in a new window

Apple’s Web Inspector documentation is pretty thorough, but I’ll point out some key things here.

The middle column gives you access to the HTML DOM of your document. All of your HTML is nested, so clicking on the triangle next to the HTML element will open its nested contents and so on. Hovering over an element will highlight it in your book view. Clicking on an element in that middle column will select it and display its associated CSS styles in the right hand column. This is great for debugging—if a style is crossed out, that means it is overridden by another style.

At the top of the righthand column, are three options: Computed, Rules, and Metrics. Rules is the default and explained above. Computed will show you a list of final styles applied to the element. It’s a good place to find out if a margin is set that you didn’t know about, or determining the final size of an element. Metrics will give you a diagram of the size of the element (including any dimensions on the margins of padding).

Have you solved any problems in iBooks now that you have access to the Web Inspector? Let me know or consider writing an EPUBSecrets post about it :).

Also, I’d like to give a hat tip to Jean-Michel Dentand for being the first person I saw this to notice the update in the latest iBooks notes.