使用Chrome開發人員選項卡用於實時HTML和JavaScript測試

在谷歌Chrome網絡瀏覽器使用Chrome開發人員選項卡用於實時HTML和JavaScript測試

約：空白給出了一個空白頁面和F12，您可以訪問開發工具選項卡。

右鍵單擊源元素給編輯爲HTML選項在開發人員選項卡

<!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>

上面是一段JavaScript代碼我複製。但JavaScript代碼沒有執行。 chrome不支持實時html編輯的這種工作流程嗎？

來源

2016-09-24 Shorn Jacob

您的腳本會在頁面加載時存在的情況下運行。在頁面加載後，腳本標記在編輯時不會運行。

但是，您可以將腳本標記內的所有內容封裝到一個函數中，然後調用它。

另外一個，而是一種無用的技術技巧，可能讓你運行的JavaScript，在元素編輯頁面加載後，看起來是這樣的：

如果添加了在到加載頁面的HTML，該輸入元素的onfocus屬性中的腳本應該運行。然而，這不是除了跨站點腳本（XSS）之外的其他任何方法。

來源

2016-09-24 03:05:44 Piwwoli

您可以使用template literal,document.write()在console。在about:blank頁面按F12，在console進入

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);

然後單擊<button>元素。

也可以單擊Sources - >Snippets，鍵入或粘貼在中心窗口上面javascript，點擊指向右邊的三角形在右面板以Snippets運行javascript。您還可以右鍵單擊Snippets面板創建一個新的代碼段以運行。

來源

2016-09-24 03:28:24 guest271314

使用Chrome開發人員選項卡用於實時HTML和JavaScript測試

回答

相關問題