2024年【面试题】你知道怎么调试线上代码吗？，前端js面试题

2401_84616399

于 2024-05-12 09:21:35 发布

阅读量315

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616399/article/details/138743527

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

这是 webpack 配置文件 webpack.config.js ：

const path = require("path");

/**@type {import('webpack').Configuration} */
module.exports = {
	mode: "production",
	entry: "./src/index.js",
	output: {
		filename: "index.js",
		path: path.resolve(__dirname, "dist"),
	}
};

tips：在编写js配置文件的时候，如果没有好的编译器提示，可以借用 JsDoc

入口文件时"./src/index.js"，输出文件是"./dist/index.js"。很简单的配置文件

下面准备入口文件 index.js：

const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

const _generate = (data, index) => {
	if (!data[index]) return null;
	const root = { value: data[index], left: null, right: null };
	root.left = _generate(data, index * 2);
	root.right = _generate(data, index * 2 + 1);
	return root;
};

// 构建二叉树
const generate = (data) => {
	return _generate(data, 1);
};

const tree = generate(data);

// 二叉树前序遍历，非递归
const printInOrder = (tree) => {
	const stack = [];
	let node = tree;
	while (node || stack.length !== 0) {
		while (node) {
			stack.push(node);
			node = node.left;
		}
		const popNode = stack.pop();
		console.log(popNode.value);
		node = popNode.right;
	}
};

printInOrder(tree);

这是一段二叉树生成，以及遍历的代码，代码稍稍有些复杂，为了调试做点铺垫

执行npx webapck,将代码打包

打包完成后，在 dist 文件夹下面生成了 index.js：

下面手动创建一个 index.html, 然后将 index.js 文件引入进去：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script src="./index.js"></script>
	</body>
</html>

在浏览器中打开：

代码正确执行

现在往代码里添加一个 throw，让其报错：

// 二叉树前序遍历，非递归
const printInOrder = (tree) => {
	const stack = [];
	let node = tree;
	while (node || stack.length !== 0) {
		while (node) {
			stack.push(node);
			node = node.left;
		}
		const popNode = stack.pop();
		console.log(popNode.value);
		node = popNode.right;
		throw ""; // 抛出错误
	}
};

然后在浏览器中勾选这一项，浏览器就会自动停在报错的地方了：

刷新浏览器：

发现代码确实停在了报错的地方，但是代码经过构建，变量名都变了。要是代码再复杂一点，就更不忍直视了。

我们在调试线上代码的时候估计也是这个样子。这个时候，就可以请出我们的法宝：sourcemap

使用 sourcemap

soucemap 是一个描述文件，调试工具可以通过这个文件，将构建代码映射成构建之前的文件。

修改 webpack 配置文件：

const path = require("path");

/**@type {import('webpack').Configuration} */
module.exports = {
	mode: "production",
	entry: "./src/index.js",
	output: {
		filename: "index.js",
		path: path.resolve(__dirname, "dist"),
	},
	devtool: "source-map",
};

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84616399

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
2024年【面试题】你知道怎么调试线上代码吗？，前端js面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。output: {tips：在编写js配置文件的时候，如果没有好的编译器提示，可以借用 JsDoc入口文件时，输出文件是。很简单的配置文件if (!// 构建二叉树// 二叉树前序遍历，非递归== 0) {这是一段二叉树生成，以及遍历的代码，代码稍稍有些复杂，为了调试做点铺垫执行,将代码打包。
复制链接

扫一扫