vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)_egde保存网站所有js

作者：Gausst松鼠会 | 2024-02-26 00:55:53

踩

egde保存网站所有js

文章目录

declaration
Note!
edge浏览器独立调试编辑并保存代码
窗格拆分和布局
- 较新版本(96+)
- devTool中根据文件名快速打开网页源代码

declaration

以下是初学者观点,可能存在谬误
尽管可以用断点调试,
目前来看,我还是喜欢用日志调试!

vscode 对于javascript的支持

js基础语言支持
official document(tutorial)
js框架支持
official document
具体请看文档相关目录

环境

vscode version:1.6+
edge for windows version:94.+
edge插件?

使用node.js调试纯js代码

测试代码

let reducer = function (accumulator, currentValue, currentIndex, array) {
    stepRes = accumulator + currentValue
    console.log('accumulator,currentValue,currentIndex,array:', accumulator, currentValue, currentIndex, array)
    console.log("after executing", 'index', currentIndex, ":", stepRes)
    return stepRes;
};
console.log("debugin reducer...");

[11, 2, 1, 3, 4].reduce(reducer);
console.log("---------------------------------");
[0, 1, 2, 3, 4].reduce(reducer);
console.log("---------------------------------");

const initialValue = 10;
[0, 1, 2, 3, 4].reduce(reducer, initialValue);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述
使用node.js调试需要你提前按照node.js
允许你直接对js文件调试,而不是在html页面上触发浏览器后调试

关于输出(调试控制台)

使用浏览器调试

在这里插入图片描述

如果不配置的话也可以运行调试
在这里插入图片描述
但是请在关联的html标签页面上执行调试(F5)(而不是js文件)

试验代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <script src="gasoline.js"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

js code:

// alert("program beginning...");
//第一步，输入
function kindIdVerify(kindID) {
    if (kindID == 92 || kindID == 97) {
        return true;
    }
}
console.log("beginning while..")
while (true) {
    var kindID = parseInt(prompt('which kind of gasoline do you want(92/97)'));
    if (!kindIdVerify(kindID)) {
        alert("wrong kindID.please enter legal kindId once more.")
    }
    else{
        break;
    }

}
alert("beginning judge...")
console.log(kindID);
var liters = parseFloat(prompt('how many liters do you want ？'));
//第二步，判断
if (kindID == 92) {
    console.log("calculating the price of No.92 gasoline");
    if (liters >= 20) {
        var price = liters * 5.9;
    } else {
        var price = liters * 6;
    }
    console.log(`price=${price}`);
} else if (kindID == 97) {
    console.log("calculating the price of No.97 gasoline...");
    if (liters >= 30) {
        var price = liters * 6.95;
    } else {
        var price = liters * 7;
    }
}

alert('价格是' + price);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42