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

文章目录

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

在这里插入图片描述
使用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>

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

按下F5

在这里插入图片描述
需要交互的地方需要您操作浏览器,使得js的运行可以继续(目前看来,这也是为什么需要浏览器才可以调试js程式,某些交互需要浏览器提供)

在这里插入图片描述
在这里插入图片描述

Note!

如果程序中有错别字(比如true写成了ture,可能会导致程序/网页没响应了,而且断点调试也陷入了假死状态)

edge浏览器独立调试编辑并保存代码

更多细节,请参考官方文档
官方说明
official tutorial and example
为了保存源代码的修改,需要添加工作目录(工作空间)fileSystem.
在这里插入图片描述
源代码修改完毕后ctrl+s保存!(会自动刷新网页)

窗格拆分和布局

edge稍旧版本:
窗口拆分:右键
源代码source+console
在这里插入图片描述

较新版本(96+)

What​​’'​s new in DevTools (Microsoft Edge 96) - Microsoft Edge Development | Microsoft Docs

中文翻译拉跨:
DevTools (Microsoft Edge 96) - Microsoft Edge Development | Microsoft Docs
在这里插入图片描述
关闭后可以回到传统模式

devTool中根据文件名快速打开网页源代码

在devtool中打开网页源代码(html/js)文件,您可以通过快捷键
ctrl+p开打文件对话框输入文件名会查找相应文件.
在这里插入图片描述

posted @   xuchaoxin1375  阅读(48)  评论(0)  编辑  收藏  举报  
相关博文：
· vscode+arduinoIDE_arduino extension/arduino/esp8266开发板配置(by official doc)+arduino语言官方文档2021.12
· egg.js_调试方式_DevTools/vscode(by official document)/egg.js ctx.body属性
· vs code调试node.js代码
· VSCode调试Javascript
· node:vscode调试代码
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2023-08-23 c_报错之函数参数个数不匹配/参数之间没用逗号来分隔
点击右上角即可分享
微信分享提示