只使用浏览器编写和调试JavaScript代码

Question

我是JS的新手，所以我希望这不是一个非常愚蠢的问题：

我要做到以下几点：

1. 创建一个.html (带有script标记)和一个空的.js文件；
2. 使用Firefox的Firebug\Chrome的检查工具*-即控制台和调试工具；
3. 使用这些工具编写用于学习的JS代码片段，并能够调试它们--但不需要每次出现错误时编辑.js文件，然后刷新页面等等，也就是说，我想在浏览器中完成所有操作(我猜这意味着它将使用控制台工具完成)。

*我不介意使用任何其他工具；我只想在浏览器中做任何事情，如果可以跳过步骤1--越好越好。

Answer 1

评估

在浏览器中直接调试javascript的一个非常基本的方法是将其写入文本区域并对其进行评估。注意，javascript中的eval返回输入字符串中最后一个表达式的值，如果字符串中的最后一个项是变量声明，则返回未定义的值，如果发生错误，则返回任何值。

我将包括这个例子作为一个初学者，但它是学生的软件，远远没有独特的！您可以根据需要添加按钮，比如用HTML模板填充文本区域，将另一个按钮写入(编辑)文本到弹出窗口或新选项卡:D。

HTML

<!DOCTYPE html><html><head><title>Eval</title><meta charset="utf-8">

<script>
function clearAreas(){
   document.getElementById("source").value = "";
   document.getElementById("result").value = "";
}
function evalSource() {
   document.getElementById("result").value =
   eval( document.getElementById("source").value);
}
</script>
</head>
<body style="background-color: #778899;">
<button type="button" onclick="clearAreas();">clear</button>
<button type="button" onclick="evalSource()">=</button><br>
<textarea cols="80" rows="20" id="source">type script here</textarea><br>
<textarea cols="80" rows="5" id="result">eval result appears here</textarea>

</body></html>

测试

let add = ( a, b) => a+b;
add( 123, 456)

将代码键入顶部的文本区域，然后单击“相等”。现在打开控制台，在代码中创建一个语法错误，然后再次单击等于。检查控制台错误消息中使用的行号与文本区域内的行相对应。