---
id: 62a255dae245b52317da824a
title: 步骤 16
challengeType: 0
dashedName: step-16
---

# --description--

你的开发者控制台是最强大的工具之一。 根据你的浏览器不同，可能需要通过按 `F12` 或 `Ctrl+Shift+I` 来打开它。 On Mac, you can press `Option + ⌘ + C` and select "Console". 也可以点击预览窗口上方的“控制台”按钮来查看我们的内置控制台。

开发者控制台将包含你的代码产生的错误，但你也可以使用它来查看代码中变量的值，这有助于调试。

Add a `console.log("Hello World");` line between your `script` tags. Then click the "Console" button to open the console. You should see the text `Hello World`.

请注意该行如何以分号结尾。 JavaScript 中的常见做法是用分号结束代码行。

# --hints--

应该在代码中添加 `console.log("Hello World");` 行。 不要忘记分号。

```js
assert.match(code, /console\.log\("Hello World"\);/);
```

`console.log("Hello World");` 行应该在 `script` 标记之间。

```js
assert.match(code, /<script>\s*console\.log\("Hello World"\);\s*<\/script>/);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
--fcc-editable-region--
    <script>

    </script>
--fcc-editable-region--
</head>
<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
        </div>
        <div id="controls">
            <button id="button1">Go to store</button>
            <button id="button2">Go to cave</button>
            <button id="button3">Fight dragon</button>
        </div>
        <div id="monsterStats">
            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
        </div>
        <div id="text">
            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
        </div>
    </div>
</body>
</html>
```

```css
body {
    background-color: darkblue;
}

#text {
    background-color: black;
    color: white;
    padding: 10px;
}

#game {
    max-width: 500px;
    max-height: 400px;
    background-color: lightgray;
    color: white;
    margin: 0 auto;
    padding: 10px;
}

#controls, #stats {
    border: 1px solid black;
    padding: 5px;
    color: black;
}

#monsterStats {
    display: none;
    border: 1px solid black;
    padding: 5px;
    color: white;
    background-color: red;
}

.stat {
    padding-right: 10px;
}
```
