|
1 |
| -# Developer console |
| 1 | +# Console do desenvolvedor |
2 | 2 |
|
3 |
| -Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). |
| 3 | +O código é propenso a erros. Você provavelmente cometerá erros ... Oh, do que estou falando? Você está * inevitavelmente * cometendo erros, pelo menos se você for um humano, não um [robô] (https://pt.wikipedia.org/wiki/Bender_Bending_Rodr%C3%ADguez). |
4 | 4 |
|
5 |
| -But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. |
| 5 | +Mas no navegador, os usuários não vêem os erros por padrão. Assim, se algo correr mal no script, não veremos de onde está partindo e não poderemos corrigir. |
6 | 6 |
|
7 |
| -To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. |
| 7 | +Para que possamos visualizar erros e obter muitas outras informações úteis sobre scripts, as "ferramentas de desenvolvedor" foram incorporadas aos navegadores. |
8 | 8 |
|
9 |
| -Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. |
| 9 | +A maioria dos desenvolvedores escolhem o Chrome ou o Firefox para o desenvolvimento porque esses navegadores têm as melhores ferramentas de desenvolvedor. Outros navegadores também fornecem ferramentas de desenvolvedor, às vezes com recursos especiais, mas geralmente estão jogando "catch-up" no Chrome ou Firefox. Assim, a maioria dos desenvolvedores tem um navegador "favorito" e muda para outros se um problema é específico do navegador. |
10 | 10 |
|
11 |
| -Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. |
| 11 | +As ferramentas do desenvolvedor são potentes; elas têm muitos recursos. Para começar, vamos aprender como abri-las, olhar para erros e executar comandos JavaScript. |
12 | 12 |
|
13 | 13 | ## Google Chrome
|
14 | 14 |
|
15 |
| -Open the page [bug.html](bug.html). |
| 15 | +Abra a página [bug.html](bug.html). |
16 | 16 |
|
17 |
| -There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. |
| 17 | +Há um erro no código JavaScript dela. Ele está escondido dos olhos de um visitante comum, então vamos abrir as ferramentas de desenvolvedor para vê-lo. |
18 | 18 |
|
19 |
| -Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. |
| 19 | +Pressione `tecla:F12` ou, se você estiver no Mac, então `tecla:Cmd+Opt+J`. |
20 | 20 |
|
21 |
| -The developer tools will open on the Console tab by default. |
| 21 | +As ferramentas de desenvolvedor serão abertas na aba Console por padrão. |
22 | 22 |
|
23 |
| -It looks somewhat like this: |
| 23 | +É parecido com isto: |
24 | 24 |
|
25 | 25 | 
|
26 | 26 |
|
27 |
| -The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar. |
| 27 | +O aspecto exato das ferramentas de desenvolvimento depende da sua versão do Chrome. Ele muda de vez em quando, mas deve ser semelhante. |
28 | 28 |
|
29 |
| -- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command. |
30 |
| -- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. |
| 29 | +- Aqui podemos ver a mensagem de erro de cor vermelha. Neste caso, o script contém um comando "lalala" desconhecido. |
| 30 | +- À direita, há um link clicável para o código-fonte `bug.html:12` com o número da linha onde o erro ocorreu. |
31 | 31 |
|
32 |
| -Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them (`key:Shift+Enter` to input multi-line commands). |
| 32 | +Abaixo da mensagem de erro, há um símbolo azul `>`. Ele marca uma "linha de comando" onde podemos digitar comandos JavaScript. Pressione `tecla:Enter` para executá-los (`tecla:Shift+Enter` para introduzir comandos multi-linha). |
33 | 33 |
|
34 |
| -Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>. |
| 34 | +Agora podemos ver erros, e isso é suficiente para começar. Voltaremos mais tarde às ferramentas de desenvolvedor e abordaremos a depuração mais profundamente no capítulo <info:debugging-chrome>. |
35 | 35 |
|
| 36 | +## Firefox, Edge, e outros |
36 | 37 |
|
37 |
| -## Firefox, Edge, and others |
| 38 | +A maioria dos outros navegadores usam `tecla:F12` para abrir ferramentas de desenvolvimento. |
38 | 39 |
|
39 |
| -Most other browsers use `key:F12` to open developer tools. |
40 |
| - |
41 |
| -The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. |
| 40 | +A interface deles é bem parecida. Uma vez que você saiba como usar uma dessas ferramentas (você pode começar com o Chrome), você pode facilmente mudar para outra. |
42 | 41 |
|
43 | 42 | ## Safari
|
44 | 43 |
|
45 |
| -Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. |
| 44 | +O Safari (navegador do Mac, não suportado pelo Windows/Linux) é um pouco especial aqui. Precisamos primeiro habilitar o "Develop menu". |
46 | 45 |
|
47 |
| -Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: |
| 46 | +Abra Preferências e vá para o painel "Avançado". Há uma caixa de seleção na parte inferior: |
48 | 47 |
|
49 | 48 | 
|
50 | 49 |
|
51 |
| -Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options. |
| 50 | +Agora o `tecla:Cmd+Opt+C` pode alternar o console. Além disso, note que o novo item do menu superior chamado "Develop" apareceu. Ele tem muitos comandos e opções. |
52 | 51 |
|
53 |
| -## Multi-line input |
| 52 | +## Entrada multi-linha |
54 | 53 |
|
55 |
| -Usually, when we put a line of code into the console, and then press `key:Enter`, it executes. |
| 54 | +Normalmente, quando colocamos uma linha de código no console, e então pressionamos `tecla:Enter`, ele executa. |
56 | 55 |
|
57 |
| -To insert multiple lines, press `key:Shift+Enter`. |
| 56 | +Para inserir várias linhas, pressione `tecla:Shift+Enter`. |
58 | 57 |
|
59 |
| -## Summary |
| 58 | +## Resumo |
60 | 59 |
|
61 |
| -- Developer tools allow us to see errors, run commands, examine variables, and much more. |
62 |
| -- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). |
| 60 | +- As ferramentas de desenvolvedor nos permitem ver erros, executar comandos, examinar variáveis e muito mais. |
| 61 | +- Elas podem ser abertas com `tecla:F12` para a maioria dos navegadores no Windows. O Chrome para Mac precisa de `tecla:Cmd+Opt+J`, Safari: `tecla:Cmd+Opt+C` (precisa ser ativado primeiro). |
63 | 62 |
|
64 |
| -Now we have the environment ready. In the next section, we'll get down to JavaScript. |
| 63 | +Agora temos o ambiente pronto. Na próxima seção, chegaremos ao JavaScript. |
0 commit comments