How to Access the Web Inspector for Desktop iBooks

  • Sumo

Screenshot 2014-06-11 13.15.30

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

iBooks Web Inspector

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.

10 Responses to “How to Access the Web Inspector for Desktop iBooks”

  1. Jeremy says:

    Fantastic! Thanks for the tip!

  2. You might want to turn off the source attachment for that terminal command. Right now it copies in Safari as:

    defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES – See more at: http://epubsecrets.com/how-to-access-the-web-inspector-for-desktop-ibooks.php#sthash.pqA1e5TO.dpuf

  3. Lindsey Thomas Martin says:

    Very helpful. Thanks for posting. One note: in my setup, the Inspector opened in the iBooks window until I scrolled over and clicked the ‘detach’ button. Setting seems to be sticky. LTM

  4. Hi
    Thanks for the tip. The above line didn’t work for me, but the following did (ie change ‘YES’ to ‘true’).
    defaults write com.apple.iBooksX WebKitDeveloperExtras -bool true

  5. […] the new iBooks Desktop Web Inspector, we now have a little insight into how certain parts of the iBooks application works. If you have […]

  6. Chad Chelius says:

    This is great Derrick! What a useful tool this will be for EPub development!

  7. pablo says:

    Hi!
    this of the web inspector on iBooks is a great thing… and it might give me a better tool for solving an issue that is really annoying… and may be you could help me understanding:

    iBooks ignore the rule “color: black;” on elements. No way to change it… and it’s a pain when you have lot’s of references on a book. horrible.

    Any ideas on how i could tweak this behaviour?

    thank you very much for your help.

    p

  8. pablo says:

    I mean on “a href” elements

  9. […] Safari an Bord hat. Das Tool muss aktiv über die Optionen angeschaltet werden, dass Verfahren dazu ist hier bei epubsecrets.com beschrieben – ist dies erledigt, hat man ein wirklich schönes Analyse-Werkzeug für sein CSS im […]

  10. […] Da diverse settimane Apple ha inserito lo strumento “Web inspector” in iBooks Desktop su Mavericks. Vediamo in questo articolo come attivare questo strumento.Prima di tutto, verificare di avere a disposizione:– iBooks su un Mac con sistema operativo Mavericks– un eBook senza DRM per fare delle prove– TerminaleIstruzioni:– Aprire il Terminale – inserire la seguente riga di comandi:defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES– premere “Enter”– Aprire l’eBook senza DRM da iBooks Desktop e selezionate una parte di testo. Quando compare il menu sarà presente la voce “Altro” che permette di accedere ad un sottomenu. In questo sottomenu sarà visibile “Mostra ispettore”.Il vostro Web Inspector apparirà in una nuova finestra.Per maggior informazioni ed approfondimenti: http://epubsecrets.com/how-to-access-the-web-inspector-for-desktop-ibooks.php#sthash.jJIUCzgr.dpuf […]