如何在瀏覽器開發者工具中直接運行本地JS文件？

在瀏覽器開發者工具中直接運行本地JS文件，無需構建項目！本文將介紹一種便捷方法，助您快速調試和測試代碼。

挑戰： 如何在瀏覽器開發者工具的Sources面板中直接運行本地JS文件？

直接在Sources面板導入本地JS文件并非瀏覽器原生功能。Sources面板主要用于調試已加載的腳本。 但我們可以利用瀏覽器控制臺的JavaScript能力來實現。

解決方案：利用FileReader讀取并執行本地JS文件

通過一段JavaScript代碼，創建一個文件選擇器，選擇本地JS文件后，使用FileReader讀取文件內容，再通過eval()函數執行代碼。

步驟：

1. 在瀏覽器開發者工具的控制臺中，粘貼并運行以下代碼：

var input = document.createElement('input'); input.type = 'file'; input.onchange = function(event) {     var file = event.target.files[0];     var reader = new FileReader();     reader.onload = function(e) {         eval(e.target.result); // 執行讀取到的JS代碼     };     reader.readAsText(file); }; input.click();

2. 點擊運行后，系統會彈出文件選擇對話框，選擇您的JS文件。
3. 選擇文件后，代碼將讀取并通過eval()執行。

重要提示： eval()函數存在安全風險，僅限于測試可信的本地JS文件。 切勿運行來源不明的JS代碼，以免造成安全隱患。 此方法適用于快速測試小段代碼，大型項目仍建議使用專業的開發工具和構建流程。