Using Chrome Developer Tab for realtime html and javascript testing

Question

In Google chrome web browser

about:blank gives an empty page and F12 gives you access to Developer Tab.

Right-clicking a source in Elements gives Edit as Html Option in Developer Tab

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


    <title></title>
</head>
<body>
    <div>
        <button id="myBtn">Button</button>
    </div>

    <div id="demo">

    </div>

    <script>
    document.getElementById("myBtn").addEventListener("click", function () {
        document.getElementById("demo").innerHTML = "Hello World";
    });
    </script>

</body>
</html>

Above is a JavaScript snippet which I copied in. But JavaScript code is not executing. Is this work flow of real time html editing not supported in chrome ?

Swiffy · Accepted Answer · 2016-09-24 03:05:44Z

1

Your script would ran, if it existed there when the page gets loaded. After the page has loaded, no script tags will just run when edited in.

You could wrap everything inside the script tags into a function and call that I think, however.

One other, but kind of a useless and technical trick that might let you run JavaScript, by editing in elements after the page has loaded, looks something like this:

If you add that in to the loaded page's HTML, the script inside that input-element's onfocus-attribute should run. This, however, is no proper way to do anything other than Cross-Site Scripting (XSS).

answered Sep 24, 2016 at 3:05

Swiffy

4,7453 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2016-09-24 03:33:37Z

You can use a template literal, document.write() at console. At about:blank page press F12, at console enter

var html = `<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <button id="myBtn">Button</button>
    </div>
    <div id="demo">
    </div>
    <script>
    document.getElementById("myBtn").addEventListener("click", function () {
        document.getElementById("demo").innerHTML = "Hello World";
    });
    </script>   
</body>
</html>`;

document.write(html);

then click <button> element.

You can alternatively click Sources -> Snippets, type or paste the above javascript at center window, click right-pointing triangle at right panel to run javascript at Snippets. You can also right-click at Snippets panel to create a new snippet to run.

Collectives™ on Stack Overflow

Using Chrome Developer Tab for realtime html and javascript testing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related