<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="panel.css">
</head>

<body id="panelBody" data-panel="debugger">

    <div class='flex-row'>
        <div class='flex-column'>
            <button class="material-button" id="debuggingButton" type="button" disabled>Start debugging</button>
            <h1>Please read:</h1>
            <p>Before debugging, please <strong>disable</strong> focus on the Sources panel for breakpoints:</p>
            <code>Settings > Preferences > Sources > uncheck "Focus Sources panel when triggering a breakpoint"</code>
            <img src="devtools_settings.png" alt="Picture of the setting in Chrome DevTools to disable.">
        </div>
        <div id="iframeContainer"></div>
    </div>

    <!-- Load script: -->
    <script src="panel.js"></script>
</body>

</html>