我先说一个每天都在重复的工作场景修改一个网页时发现页面上的某个视频被转了个角度想快速看看顺不顺眼于是打开浏览器控制台敲一行 JavaScript把视频元素选中、临时加个旋转样式眼睛确认没问题后再去改代码。另一边你刚写好一批文件要批量改名手点太慢直接打开终端写个 Shell 脚本循环处理几秒钟跑完。这里其实就出现了两个东西Shell 语言以及 JavaScript 调试终端。很多人把这两者当成互不相干的知识点但实际工作中它们经常在同一个人身上交汇——前端要调试页面逻辑后端正忙着用 Shell 做部署和自动化今天的博文就把这两块基础一次性讲清楚尤其适合刚入门前端、全栈以及想系统补一下命令行基本功的开发者。1. 为什么“Shell 语言基础”会和“JavaScript 调试终端”放在一起1.1 标题背后的两个关键词其实是一条工作流最初看到“Shell语言的基础知识介绍 - JavaScrip调试终端”这个标题我也愣了一下Shell 是 Linux 终端里的脚本语言JavaScript 是网页脚本语言这两者怎么凑到一起的后来细想这完全符合一个真实开发者的日常白天在浏览器开发者工具里调试 JavaScript晚上在服务器上写 Shell 脚本做定时任务又或者是在 Node.js 的环境里一边在终端里跑 JS 脚本一边用 Shell 命令管理文件和进程。所以“调试终端”这个词才是破题关键。它既可以指浏览器里的 DevTools Console也可以指 Node.js 的 REPL 交互环境甚至也可以指你打开的那个终端窗口。而我们在这些终端里输入的语言要么是 JavaScript要么是 Shell。把这两个基础打牢你的日常开发效率会有一个非常明显的提升——因为不需要再频繁去查“这个命令怎么写”“这段代码为什么报错”手和脑子是一致的。1.2 先理清几个概念终端、Shell、命令行、REPL很多初学者会把终端、Shell、命令行这几个词混成同一个东西其实它们是不同层级的。终端是一个窗口程序负责接收你的键盘输入并显示输出比如 Windows Terminal、iTerm2、VS Code 自带的终端面板。Shell 是跑在这个终端里的命令解释器Linux 下常见的是 bash、zsh、shWindows 下则是 PowerShell。你在终端里输入一行文字Shell 负责解析它、执行它再把结果打印回终端。命令行指的是你输入的那一串命令而 REPL 是 Read-Eval-Print Loop 的缩写意为“读取-求值-打印-循环”它描述的是交互式解释环境的工作方式——你输一行它立刻执行一行并返回结果。为什么要搞清楚这些因为标题里的“调试终端”就是 REPL 的一种具象化。你在浏览器控制台里敲 JS浏览器立即执行并返回结果这是 REPL你在终端里输入node进入 Node.js 的交互模式这也是 REPL你在 bash 里一条条敲 Shell 命令同样是一种 REPL 的风格。理解了这层就明白“Shell 语言”和“JavaScript 调试终端”本来就是天然共存的两个基础技能包。1.3 谁是这份基础知识的最大受益者如果你是纯前端天天和浏览器 Console、Source 面板打交道Shell 的基础能让你在本地起服务、跑构建、部署静态资源时不再两眼一抹黑。如果你是后端或运维Shell 是吃饭的家伙但页面调试时依然要开浏览器检查JavaScript 基础刚好补齐这块短板。如果你是刚学编程的学生把这两门“脚本型”语言先掌握好是进入真实项目最平滑的路径。一句话总结这个章节的核心Shell 管的是操作系统层面的自动化和交互JavaScript 管的是页面、应用和 Node 环境里的逻辑调试二者合起来就是一套完整的“终端工作流”。2. Shell 基础扫盲命令、脚本与绕不开的语法细节2.1 Shell 到底解决什么问题脚本和命令有什么不同Shell 解决的核心问题只有一个让计算机按你的指令批量执行操作。手动敲命令适合一次性的操作比如cd projects切目录、ls -la看文件、df -h看磁盘空间。但当你发现“每天要做同样五六个步骤”时手敲就变成了一件浪费生命的事于是把命令写进一个文本文件加上循环、判断和变量这就是 Shell 脚本。比如文件夹里有一百个日志文件你要把所有.log改名为.txt用命令加循环几秒钟就搞定for file in *.log; do mv $file ${file%.log}.txt done这段脚本的核心是for循环遍历当前目录下所有匹配*.log的文件然后对每个文件执行mv改名。${file%.log}是 Shell 里的字符串截取语法它的意思是“去掉变量 file 末尾的 .log”后面再拼上.txt就构成了新文件名。这个写法比在命令行里一条条敲mv高明得多也是我建议每个新手都要掌握的第一个循环范例。2.2 变量、引号、$() 与 ${} 的区别热搜词里最容易被搞混的知识点很多人在初学 Shell 的时候最晕的就是${}和$()包括一些写了两年脚本的人偶尔也会打错。${}是变量扩展。加了花括号可以明确变量的边界避免歧义。比如你想在变量name后面拼接字符串_2025nameapp echo ${name}_2025如果写成echo $name_2025Shell 会去找一个叫name_2025的变量结果自然是空的。用${}就能明确告诉 Shell变量名叫name后面跟着_2025是普通文本。$()是命令替换。它把里面命令的运行结果作为值返回比如today$(date %F) echo 今天是 $today$(date %F)会先执行date %F命令得到类似2025-06-01的日期字符串再把这个字符串赋值给变量today。老式的写法是用反引号command但反引号里嵌套反引号时会出现转义混乱所以现在更推荐一律使用$()。变量赋值还有一个所有人都会踩的坑等号两边不能有空格。name world会被 Shell 解析成执行name命令并传入两个参数几乎必然报错command not found。正确写法是nameworld。另外我建议所有引用变量的场景都用双引号包住比如$name因为变量值如果包含空格不加双引号会被 Shell 拆成多个词导致参数错位。这个细节在删除文件的时候尤其危险。2.3 命令怎么查、怎么记才能不用死记硬背Shell 命令非常多没必要都背下来。我的习惯是先记住最常用的一批剩下的靠man command或command --help现查。比如ls的参数ls -la里的-l是以长格式显示-a是显示隐藏文件。想要分屏查看可以接管道ls -la | lessless会用翻页的方式展示内容按q退出。查看磁盘空间用df -h其中-h表示 human-readable自动换成易读的单位。查看当前目录占用大小用du -sh *。这两个命令在排查服务器磁盘写满问题时几乎是必用组合。cd切换目录时不带参数会回到用户主目录cd -会回到上一次所在目录这个细节对于频繁往返两个目录的场景非常好用。2.4 Shift 命令写命令行参数解析的利器热词里出现了“shell的shift命令”这个值得单独说一下。shift的作用是把位置参数整体左移一位原本的$2变成$1$3变成$2以此类推。它最典型的使用场景是配合while循环逐个处理参数。while [ $# -gt 0 ]; do echo 处理参数: $1 shift done$#是当前剩余参数个数$1是当前第一个参数。每执行一次shift参数个数减一参数整体前移。这样写的好处是无论调用时传进来多少参数脚本都能统一处理不需要笨拙地写$1 $2 $3 ... $9一长串。对于写命令行工具来说这个技能几乎是必考项。2.5 那些年我们一起踩过的 Shell 坑/bin/sh和/bin/bash并不完全一样。在很多 Linux 发行版里/bin/sh指向 dash语法要求更严格比如[[ ]]条件测试在某些 sh 环境下就不被支持所以要写可移植脚本时要么头部写明#!/bin/bash要么只用 POSIX 兼容语法。不要用if [ $var ]这样不带引号的判断因为变量为空时[ ]内部会变得不完整直接语法报错。稳妥写法是if [ -n $var ]。Windows 编写脚本上传到 Linux 会报$\r: command not found这是 CRLF 换行符导致的在编辑器里设置换行为 LF 即可。默认情况下 Shell 脚本遇到某一行命令失败并不会终止脚本而是继续往下执行。想“出错即停”可以在脚本头部加set -e想逐行跟踪执行过程可以加set -x它会打印每一条实际执行的命令这是排查脚本逻辑最直接的手段。3. JavaScript 调试终端控制台里能做的事比你想的多3.1 浏览器调试终端 Console不只是看 logJavaScript 调试终端最典型的就是浏览器开发者工具里的 Console 面板。按 F12 或者 CmdOptionI 打开开发者工具切到 Console就可以直接输入 JavaScript 表达式回车立即看到结果。它最大的价值在于不需要刷新页面、不需要重跑构建、不污染源码就能临时验证你的想法。热词里有一个非常接地气的例子const v document.querySelector(video); v.style.rotate -90deg;第一行用document.querySelector(video)选中页面上的第一个 video 元素赋值给变量v第二行给这个元素的style.rotate赋值为-90deg视频就被临时旋转了 90 度。这个例子适合“视频方向不对想先看转过来后是否正常”的场景。注意这是临时修改刷新页面后浏览器不会保留控制台里对页面状态的改变所以它只适合调试并不影响线上用户看到的效果。Console 里还能执行console.log()打印信息、console.table()用表格形式输出数组和对象、console.time()与console.timeEnd()统计一段操作的耗时。这些输出方式配合断点调试几乎能覆盖日常前端调试 80% 的需求。3.2 把 JavaScript 核心基础快速过一遍热词里有很多 JavaScript 学习手册的关键词比如数据类型、运算符、条件语句、循环语句、字符串、数组、对象等。这里不展开成教程只挑最容易在调试终端里出错和最有价值的知识点讲。JavaScript 的数据类型大体分两类原始类型和引用类型。原始类型包括 number、string、boolean、null、undefined、symbol、bigint引用类型主要是 object以及由它衍生的 array、function、date 等。调试终端里最常见的报错往往就是把原始类型当引用类型用或者反过来比如直接给null取属性就会报 TypeError。函数方面剩余参数是 ES6 之后写代码的常用手段function sum(...numbers) { return numbers.reduce((total, n) total n, 0); } console.log(sum(1, 2, 3, 4)); // 10...numbers会把调用时传入的所有参数收集成一个数组这样函数就能处理任意数量的参数。会写剩余参数就能少写很多arguments相关的兼容代码。字符串合并其实有三种方式拼接、concat()方法和模板字符串。模板字符串是我现在最常用的const name App; console.log(当前项目${name}长度${name.length});用反引号包住字符串${}内直接写表达式比字符串拼接可读性强太多了。需要提醒的是用做字符串和数字的合并时数字会自动变成字符串比如1 2的结果是12这一点经常成为新手调试时困惑的来源。3.3 通过字符串调用函数、监听页面与检查静态资源有时候你希望动态调用一个函数而函数名保存在字符串里怎么做直接通过全局对象访问即可function refresh() { console.log(refresh called); } window[refresh]();在浏览器环境中顶层声明的函数会挂在window上所以window[refresh]()等价于直接调用refresh()。在 Node.js 环境里则要改用globalThis[refresh]()或者把函数显式挂在一个对象上。这个技巧在处理插件系统、动态命令分发的场景很实用。监听页面状态和检查静态资源是否加载完成也是前端调试常遇到的问题。最简单的监听是window.addEventListener(load, () { ... })等页面所有资源加载完成后执行回调。要检查某个脚本或图片是否真的加载成功可以这样const resources performance.getEntriesByType(resource); const target resources.find(r r.name.includes(main.js)); console.log(target ? 加载耗时: ${target.duration}ms : 未找到该资源);performance.getEntriesByType(resource)返回所有静态资源的加载记录包含耗时、大小、协议等信息。但要注意如果资源跨域且没有设置 CORS 响应头performance里可能拿不到该资源的详细数据这是浏览器安全策略决定的不属于代码 bug。3.4 运行时报错、javascript:void(0) 与表单校验的认知纠偏JavaScript 调试终端里最常见的运行时报错无非几种变量未定义、读取 null 的属性、类型不匹配。排查时先看 Console 里报红的那一行点右侧的文件名和行号就能跳到 Source 面板对应的代码如果报错信息不直观直接在可疑处写一行debugger;代码执行到这一行会自动进入断点状态再结合变量面板逐行看状态变化。javascript:void(0)这个老古董也进了热词。它的意思是执行一段 JavaScript 表达式但用void保证返回值是 undefined从而避免浏览器用返回值替换当前页面。常见用途是作为a hrefjavascript:void(0)的跳转占位防止点击链接时页面刷新或跳到顶部。现代开发更推荐直接用button或事件preventDefault()但看懂老项目里的这种写法依然很重要。关于表单提交和 H5 的区别一句话说清原生表单提交会触发表单事件并把页面导航到 action 指定的地址而 HTML5 在此基础上增加了required、typeemail、pattern等内置校验规则。用 JS 拦截提交时可以调用form.checkValidity()主动触发校验避免绕过浏览器原生提示。3.5 从 OC 互调到 WebGPUJavaScript 的边界在扩展热词里还有几个较深的词比如“oc和javascript互相调用”“splat.js 纯 javascript webgpu 的 3d 高斯泼溅处理方案”。OC 和 JavaScript 互相调用指的是 iOS 里使用 WKWebView 加载网页时原生 OC/Swift 代码可以向网页注入 JS 或调用网页里的 JS 函数网页也能通过 WKScriptMessageHandler 等机制向原生层发消息。这属于 Hybrid 开发的经典场景如果你做移动端内嵌 H5这个知识点绕不开。splat.js 则是把 JavaScript 带到了 WebGPU 时代。高斯泼溅是 3D 重建和渲染领域的一个热点方向splat.js 用纯 JavaScript 加 WebGPU 实现说明 JS 不再只是页面交互的脚本语言也可以承担高性能图形计算。这给 JavaScript 的“调试终端”增加了新维度以后前端调试的可能不只是 DOM 和请求还有 GPU 渲染管线。4. 联合实战用 Shell 驱动 JavaScript搭一套终端调试工作流4.1 用 read 命令做交互式“对话”五分钟写一个命令行问答器热词里有一条“如何用shell做对话”这里我理解的“对话”是指 Shell 脚本与用户之间的交互输入。实现交互的核心命令是read#!/bin/bash read -p 请输入你的名字: name echo 你好$name read -p 你想做什么1) 查看磁盘 2) 运行 JS 脚本 3) 退出: choice case $choice in 1) df -h ;; 2) node check.js ;; 3) echo 再见 exit 0 ;; *) echo 无效输入请重新运行 ;; esacread -p 提示文字 变量名会先输出提示文字等待用户输入并存入变量。case是 Shell 里的分支语句写法有点特殊每个分支用)结束条件分支体最后用;;结束。这段脚本跑起来后效果就是脚本主动问你你回答脚本根据回答执行对应动作这就是最朴素的“Shell 对话”。如果你想更高级一点可以加上循环让用户输入一次后不退出而是继续回到菜单#!/bin/bash while true; do read -p 请选择 1) 查看磁盘 2) 运行 JS 3) 退出: choice case $choice in 1) df -h ;; 2) node check.js ;; 3) break ;; *) echo 输入不合法 ;; esac done4.2 用 Shell 循环批量调用 Node 脚本把静态资源检查自动化假设你有几十个页面地址想批量检查每个页面里某个静态资源是否加载成功手工逐个打开页面太累。这时候可以写一个 Node 脚本来处理单个 URL再用 Shell 循环把所有 URL 都跑一遍。先写一个简单的 Node 脚本fetch-check.jsconst url process.argv[2]; fetch(url) .then(res console.log(${url} - ${res.status})) .catch(err console.log(${url} - FAIL: ${err.message}));process.argv[2]是 Node 里获取命令行参数的方式第一个参数是node第二个是脚本路径从第三个开始才是自己传入的参数。然后用 Shell 批量执行#!/bin/bash for u in $(cat urls.txt); do node fetch-check.js $u done$(cat urls.txt)会把 urls.txt 文件里的每一行变成一个词供 for 循环遍历。这里要注意如果 URL 里有空格或特殊字符简单的 for 循环会把它拆开更稳妥的方式是使用while readwhile read -r u; do node fetch-check.js $u done urls.txtread -r中的-r选项表示不把反斜杠当转义符读取文本时更加原汁原味。从这段代码能看出Shell 和 JavaScript 并不是互相替代的关系而是各司其职Shell 负责流程调度、循环、文件读取JavaScript 负责具体的业务逻辑。4.3 adb shell 在安卓调试中的安全用法热词里有一条“shell 安卓 11 模拟 手机晃动”结合常见安卓调试场景我提一下 adb shell 的合法用法。adb shell 可以让你在电脑上执行安卓设备内部的 shell 命令常见的调试用途包括adb shell input keyevent KEYCODE_HOME模拟按主页键adb shell input swipe x1 y1 x2 y2 duration模拟滑动屏幕adb shell dumpsys battery set level 50临时修改设备模拟电量测试低电量场景adb shell dumpsys battery set usb 0模拟移除 USB 充电常用于测试应用在不同充电状态下的行为。注意这些命令修改的是设备调试状态测试完成后建议用adb shell dumpsys battery reset恢复。至于“模拟手机晃动”这种传感器模拟单纯靠 adb 并不好用通常需要配合自动化测试框架或设备厂商提供的传感器模拟工具而且这属于设备调试领域不是 Shell 脚本的常规主题。普通开发者了解前面几个命令就够了能在真机调试中省不少事。4.4 ssh 免密登录执行 shell远程自动化最常用的姿势当脚本要在远程服务器上执行时最烦的就是每次都要输密码。ssh 免密登录的正确流程是本地生成密钥对把公钥放到服务器的authorized_keys里之后 ssh 就不再问密码了。ssh-keygen -t ed25519这一步会生成一对密钥默认放在~/.ssh/下直接一路回车即可不设置密码短语。然后把公钥拷贝到服务器ssh-copy-id useryour-server它会自动把本地的公钥追加到服务器用户的~/.ssh/authorized_keys文件里。之后就能这样执行远端命令ssh useryour-server df -h甚至可以把本地整个脚本内容通过管道传给远端 bash 执行cat deploy.sh | ssh useryour-server bash -s这种写法非常适合一次性远端部署脚本内容在本地维护传到服务器上运行不用在服务器上留存多余文件。很多小型团队就是用这个思路完成代码发布。需要提醒的是免密登录方便但私钥文件一定保护好别上传到公开仓库。5. 常见问题与排查技巧实录5.1 那个著名的报错/bin/sh: wq: command not found热词里有一整条是[no write since last change] /bin/sh: wq: command not found shell returned 1这个报错几乎每个新手都用 vim 时遇到过我详细拆一下。出现这个问题的原因通常是在 vim 编辑界面里想保存退出但输入法或手速不对导致wq没有出现在 vim 的命令行模式里而是被打到了文档正文中或者你直接在/bin/sh提示符下输入了wqShell 当然找不到叫wq的命令于是报command not found。前面的[no write since last change]则提示文件有修改但还没保存。正确的 vim 保存退出流程是按Esc回到普通模式输入冒号:此时冒号会出现在 vim 底部再接着输入wq最后按回车。w表示 write 写入q表示 quit 退出所以:wq是“保存并退出”。如果你根本不想保存修改直接:q!强制退出即可。还有一个冷门但好用的命令是:x它和:wq类似但只有在文件确实被修改过时才执行写入更适合长期挂着编辑器的场景。如果你确认文件是只读的:wq还会报E45: readonly option is set这时要么用:wq!强制执行写入要么先确认这个文件是否应该被当前用户修改。5.2 Shell 脚本常见错误的速查与排查思路症状根因解决思路command not found脚本看起来没错可能使用了 sh 不支持的语法检查脚本第一行#!/bin/bash或改为 POSIX 兼容写法变量赋值后输出为空赋值时等号两边误加了空格写成varvalue等号两侧不要留空格文件名含空格脚本处理出问题变量没加双引号导致拆词所有变量引用都用$var包住从 Windows 拷贝脚本后报$\r错误CRLF 换行符在编辑器中把换行符改为 LF脚本某一步失败但仍然继续跑没设置错误退出脚本头部添加set -e排查 Shell 脚本时最有效的两步第一步bash -n script.sh只做语法检查不执行代码能快速发现语法错误第二步在脚本头部加上set -x跑一遍看输出每一行实际执行的命令都会打印出来能精准定位逻辑跑偏的位置。排查完记得把set -x删掉否则脚本运行时会输出大量调试信息。5.3 JS 调试终端里的翻车现场和应对第一个高频问题是在浏览器 Console 里用let或const声明变量后再刷新页面发现变量不存在了。Console 有自己的上下文作用域页面刷新会清空所以如果你想让某个变量在多次执行之间保留可以把它挂到window上window.myVar 123。第二个高频问题是用document.querySelector取元素时返回 null后面调用.style就报 TypeError。解决方法是先判空const video document.querySelector(video); if (video) { video.style.rotate -90deg; }第三个问题是“通过字符串调用函数”时函数明明存在却报 not a function。这往往是因为函数不是全局的或者被模块作用域包裹。在 ES Module 里声明的函数不会自动挂到window上所以window[fnName]会找不到。解决办法是显式导出并挂载或在需要动态调用时把函数放进一个对象里。第四个问题是检查资源加载状态时performance.getEntriesByType(resource)里看不到某些 CDN 资源原因是跨域资源未设置crossorigin属性。如果确实需要拿到资源分析数据给对应标签加上crossoriginanonymous并确保服务器返回正确的 CORS 头。5.4 冷门但真实的坑EFI Shell cannot find required map name热词里出现了一条efi shell cannot find requireed map name这其实不是常规 Linux Shell 的报错而是 UEFI 环境下的 EFI Shell 报错。EFI Shell 是主板固件里的一个小型命令行环境和 bash 完全是两回事。这个错误通常表示 EFI Shell 找不到驱动映射的分区名比如命令里写了fs0:但当前环境里并没有这个映射。遇到这种问题排查思路是先执行map命令查看所有可用的文件系统映射确认盘符是不是叫fs0还是fs1。如果找不到任何映射可能启动介质里缺少 EFI 驱动。对于普通开发者和运维来说这个知识了解即可真正会遇到它的是做固件开发、系统集成的人。把它放在这里是提醒大家同样叫 Shell不同环境下差很远先确认自己身处哪个环境再排障。5.5 提效小技巧终端分屏、历史搜索与 JS 调试断点终端操作有几个不容易发现但很实用的习惯。ls -la | less可以在长文件列表里分屏翻页按/还能搜索关键词。CtrlR可以反向搜索历史命令输入几个字母就能找回以前敲过的长命令。df -h这种命令想定时循环看的话可以用watch -n 2 df -h每两秒自动刷新一次。JavaScript 调试终端里最有价值的是debugger语句。你把它放在代码里只要开发者工具是打开状态执行到这一行就会自动暂停进入 Source 面板此时可以看变量值、单步执行、查看调用栈。很多初学者习惯用console.log打一堆日志但遇到复杂逻辑时断点比日志高效得多。6. 写在最后的几个实用心得我自己在实际用的过程中最大的体会是学习 Shell 和 JavaScript 调试终端不要追求把所有命令和 API 背下来而是抓住“我能用它们立刻验证什么”这个核心。Shell 是操作系统的对话接口JavaScript 是页面和 Node 世界的对话接口调试终端就是把这种对话即时化、可视化。善用man、--help和浏览器控制台比死记硬背重要得多。写脚本时我还有一个小习惯尽量让脚本幂等。所谓幂等就是重复跑同一套脚本不会产生副作用不会把已经处理过的文件再处理一遍。比如批量改名前先判断目标文件是否已存在存在就跳过执行远端部署时先做备份再覆盖。这个习惯能帮你避免很多线上事故。再分享一个经常被忽略的小技巧给 Shell 脚本加上退出码。脚本末尾写exit 0表示成功遇到错误时exit 1表示失败。看似简单但当你用 CI/CD 系统或定时任务调用脚本时退出码直接决定任务是否被判定为成功。很多脚本“跑完没报错但实际逻辑失败了”就是因为缺少这一行状态标记。最后想说的是不要小看这些“基础知识”。它们恰恰是日常开发里最高频出现、也最容易被忽略的地基。Shell 和 JavaScript 调试终端这两个话题无论你做到什么职位几乎每天都会用到。把今天讲的这些细节消化掉再去碰那些复杂的框架、工程化工具、云原生基础设施都会觉得踏实很多。