Web Inspector

Apple libera ferramenta para inspecionar código no iBooks

Web Inspector

Se você é um desenvolvedor web, já sabe que uma das melhores ferramentas para desenvolvimento de páginas na internet é a função de inspecionar, que permite editar o HTML e o CSS ao vivo, facilitando a depuração de qualquer número de problemas potenciais. Algumas semanas atrás, a ferramenta Web Inspector foi adicionada ao iBooks para Mavericks. Agora temos a mesma usabilidade de ajustes e edição disponíveis nos browsers, também no iBooks, para produção de eBooks. Veja como obter acesso a ele:

Primeiro, você precisa do iBooks em um Mac com o Mavericks; depois um livro iBooks sem DRM (o Web Inspector só funciona com livros sem DRM) e pronto! Mas, é só isso mesmo? Sim. A boa notícia é que é realmente fácil.

Instalação e Uso

  1. Abra o Terminal;
  2. Na janela Terminal, copie e cole a seguinte linha:
    defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES
  3. Pressione Enter;
  4. Agora, abra o iBooks;
  5. Abra seu livro sem DRM;
  6. Selecione um texto;
  7. Quando o menu é exibido com destaque, na parte inferior do menu, você verá uma opção chamada “Mais.” Quando você passa o mouse sobre essa opção, um novo menu irá aparecer. Na parte inferior da lista, você verá “Mostrar Inspector”. Clique nesse link. Veja a imagem abaixo;
  8. O Web Inspector irá aparecer em uma nova janela.

Web Inspector

 

A Apple disponibiliza a documentação da Web Inspector que é bastante completa, mas podemos destacar algumas coisas importantes:

A coluna do meio lhe dará acesso ao HTML do documento. Se todo o seu HTML estiver alinhado, é só clicar no triângulo ao lado do elemento HTML que vai abrir o conteúdo já alinhado, e assim por diante. Se você pairar sobre qualquer elemento, ele ficará destacado, e ao clicar, você irá selecionar e exibir seus estilos CSS associados na coluna da direita. Isso é ótimo para verificar se um estilo está em conflito e precisa ser substituído.

Você também pode descobrir se a margem que definiu está correta ou determinar o tamanho final de um elemento através da opção no topo da coluna do lado direito chamada Computed. Essa opção lhe mostrará uma lista de estilos finais aplicados ao elemento. Já as Metrics– outra opção na coluna do lado direito – lhe dará um diagrama do tamanho do elemento, incluindo informações de margens e espaços internos.

Fonte: Epub Secrets

Assine nosso informativo e receba notícias sobre cursos, promoções e artigos especiais da dualpixel

COMPARTILHAR:
, , , , , , , , , , , , , , , , , , , , , ,

Redação Dualpixel

Monitoramos o que há de mais relevante sobre midia impressa e digital para te manter informado.

Deixe uma resposta