---
id: 62a255dae245b52317da824a
title: Крок 16
challengeType: 0
dashedName: step-16
---

# --description--

Одним із найпотужніших інструментів є ваша консоль розробника. Її можна відкрити за допомогою `F12` або `Ctrl+Shift+I`, залежно від вашого браузера. На Mac ви можете натиснути `Option + ⌘ + C` та обрати «Консоль». Ви також можете натиснути кнопку «Консоль» над вікном попереднього перегляду, щоб побачити нашу вбудовану консоль.

Консоль розробника включатиме помилки, створені вашим кодом, але ви також можете використовувати її, щоб переглянути значення змінних у своєму коді, що корисно для налагодження.

Додайте рядок `console.log("Hello World");` між тегами `script`. Потім натисніть кнопку «Консоль», щоб відкрити консоль. Ви повинні бачити текст `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;
}
```
