【JavaScript入门笔记03 代码质量Ⅰ】_浏览器sources中文在哪-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49551563/article/details/125633533

笔记参考javascript.info中文站

在浏览器中调试（Edge）
代码风格

在浏览器中调试（Edge）

调试是指在一个脚本中找出并修复错误的过程，下面将使用我个人常用的Edge浏览器，它的开发者工具——调试面板可以让我们一步步地跟踪代码以查看当前实际运行情况。

1. “资源（Sources）”面板

在浏览器中打开示例页面
按 F12 打开开发者工具
选择source（源代码 / 资源）面板

你可能看到这个界面：
source面板
包含个三部分：

文件导航，包括所有html，css，Javascript 文件
源码显示，可以查看、修改代码，但不会修改源码（刷新后恢复）
js调试，用于调试 js 的一系列工具

2. 控制台

打开开发者工具后，我们可能会看到下方的 “控制台”（console），如果没有，按下 ESC 以调出
console
在这里，我们可以输入代码并获得返回值，例如：

输入 1 + 2，得到 3
输入 hello("debugger")，运行 hello 函数，返回 undefined （因为此函数无 return）

3. 断点

断点是调试器会自动暂停 JavaScript 执行的地方，在源码窗口我们可以通过点击对应行的序列号来设置断点，标号变色即设置成功，会在右侧断点列表中展示（多断点时很方便）

设置断点的目的是暂停代码，方便我们调试代码，即检查变量、执行命令等。

我们还可以右键表号，设置 “条件断点”，只有当给定的表达式（你创建条件断点时提供的表达式）为真时才会被触发。

条件断点

我们也可以使用 debugger 命令来暂停代码：

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 调试器会在这停止

  say(phrase);
}

debugger 命令只有在开发者工具打开时才有效，否则浏览器会忽略它

4. 暂停并查看

设置好断点后，按下 F5 刷新页面即可重新执行代码，并激活断点，此时我们可以查看程序的状态：
暂停查看

监视（watch）
点击 “+” 号输入你想监视的表达式，在之后程序运行中会显示该表达式的当前值
调用堆栈（Call Stack）
显示嵌套的调用链，即当前执行的代码属于哪个函数，哪些函数又被哪些函数 / 文件调用了，依次嵌套
在上图的例子中，第八行调用了 say 函数，say 又处于 hello 函数中，hello 又被 index.html 文件匿名调用
作用域（Scope）
显示当前的变量，Local 指函数内变量，Global 指全局变量

5. 跟踪执行

下面的这些按键可以帮我们跟踪代码执行，各浏览器对这些按键的称呼和位置并不统一，但功能基本相同
跟踪执行

恢复（Resume）
快捷键 F8 ，恢复代码正常执行，直到代码结束或遇到下一个断点
下一步（Step）
快捷键 F9 ，运行下一行指令，逐行运行
跨步（Step over）
快捷键 F10 ，和 “下一步” 功能类似，但如果遇到函数，会跳过函数内部的执行步骤，不会暂停
步入（Step into）
快捷键 F11 ，和 “下一步” 功能类似，但 “下一步” 不会异步执行，如 setTimeOut 一类的异步命令就需要 “步入” 来调试
步出（Step out）
快捷键 Shift + F11，直接运行到函数的最后一行再暂停
启用/禁用所有的断点
批量操作断点
启用/禁用出现错误时自动暂停脚本执行
启动此功能时，且开发者工具是打开着的时候，任何脚本执行错误都会导致该脚本执行自动暂停，如果脚本因为不知名错误 bug 了，这会方便我们找出错误
继续转到此处
在某一行代码右键，找到 “继续转到此处”，点击即可让程序运行到那一行再暂停，当你想要向前移动很多步到某一行为止，但是又懒得设置一个断点时非常的方便。

6. 日志记录

console.log() 函数，可以让你再控制台打印一些内容，方便调试，而且普通用户是看不到控制台的
举个例子：

// 打开控制台来查看
for (let i = 0; i < 5; i++) {
  console.log("value", i); // 打印数字0 - 4
}

代码风格

我们的代码必须尽可能的清晰和易读，事实上，养成良好的代码风格是在减少自身工作

1. 建议规则

这是一份规则备忘录，但也仅仅是备忘录，不按建议编写可能并没有语法问题，但我们依然建议您按照规则编写 Javascript 代码

规则备忘录
上图来自 Javascript.info 网站

花括号

Javascript 的左花括号与相应的关键词在同一行上，而不是新起一行，且前面应存在一个 “空格”
这样的风格被称为 “Egyptian” 风格，或 K&R 风格

在单行构造中，我们这样使用花括号：

// 根本不使用花括号
if (n < 0) alert(`Power ${n} is not supported`);

// 分三行，现代编辑器允许程序员不再过分担心代码长度
if (n < 0) {
  alert(`Power ${n} is not supported`);
}

行的长度

过长的代码最好分割一下，没人喜欢横向滚动轴
比如长字符串，再比如有很多条件的 if 语句：

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

缩进

对于水平缩进：一个 tab 一个缩进，tab 可以是两个空格，也可以是四个，这没有严格规定，但是有的的时候，单纯的空格更加灵活

对于垂直缩进：垂直缩进是用于将代码拆分成逻辑块的空行，即使对于单个函数，垂直缩进也非常重要，它可以大幅提高代码的美观度和可读性，写代码时，不应该出现连续超过 9 行都没有被垂直分割的代码。

function pow(x, n) {
  let result = 1;
  //              <--初始化变量和主函数分离
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--主函数和返回值分离
  return result;
}

分号

每一个语句后面都应该有一个分号。即使它可以被跳过
嵌套的层级

尽量避免代码嵌套层级过深，我们要学会避免不必要的嵌套
举个例子：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

// 上面的这个 else 就是不必要的嵌套，按下面这样写一样
function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

函数位置

有三种方式来组织你的辅助函数和主函数：上方声明、下方声明、混合声明

一般情况下，下方声明最好，因为有时只看主函数内容和辅助函数的名字就能知道代码的功能，不需要细读辅助函数的内容

举个例子：

// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

// --- 辅助函数 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}