欢迎至《周日源流》第四集.
今日之恶徒何在？
JavaScript控制台之谬误.
那令人胆寒之赤色文字，开发者佯装立时洞悉.
诚然，控制台谬误乃开发者终将与之交契之物。非因吾辈欲之，乃JavaScript所迫也.
初时，控制台之误，令人望而生畏。
汝见巨幅赤色之讯。
随机之行号。
奇名如：
Uncaught TypeError
或
Unexpected token
俄而觉浏览器似言他语。
然经屡废其事，屡试不效，及夜半穷理，始悟至理：
实乃控制台欲助尔也。
非攻尔也。
惟陈其谬耳。
既习读此讯，则排错之惧渐消，若解小谜矣.
此篇大抵化惊红为可解之理.
盖凡工皆至 console 不复可怖之境…
…而始见其用。
初次毁我自信于机
尚忆书简事微：
console.log(userName)
更新之，冀其有奇术.
而浏览器应之如斯：
Uncaught ReferenceError: userName is not defined
彼时，吾心二念。
- “何谓未捕获？”
- “何故 JavaScript 怒于我？”
而最可笑者何？
吾诚以为吾之瀏覽器已損壞矣。
吾屡次刷新之，以为或可消吾之谬误。
揭秘：
未然。
若尝启DevTools而睹赤色之墙，贺君——尔已正为码者.
控制台非尔之敌.
实乃JavaScript竭力告尔曰：
“噫……物有毁坏。此其处也。请先之，俟用户睹此。”
既习读控制台之误，则排错之事，远少可怖矣。
弊在多数开发者初遇之失，多凭情动而非理析。
睹赤文立生忖度：
“万事皆倾颓矣。”
然多失实微末耳。
一误字耳。
一括号之遗。
一名之谬。
一载之失。
微瑕致巨变。
何者诚能状JavaScript之妙。
何谓JavaScript控制台乎？
此机若似通灵之径介于汝之码与浏览器之间。
汝之浏览器日志：
- 谬误
- 警诫
- 网络请求失败
- 自定义消息
- 调试信息
可如此开启之：
Chrome / Edge
F12
或
Ctrl + Shift + I
则往控制台之标签
今可实时观汝之谬误
趣哉
然控制台之能，远超众开发者之识
非惟显谬之场
亦为试炼之境
可直于控制台运JavaScript
例：
2 + 2
浏览器立时应之：
4
汝可察变量，试函数，操弄DOM，且排逻辑之谬，而毋须频改文书。
是故，资深开发者多耗时于DevTools之中。
瀏覽器控制台成為君之勞作之部分。
終將，君止懼之。
君實開始賴之。
此聽似怪異，直至君之應用於生產中崩壞，而控制台成為君唯一之線索。
官方定義
JavaScript控制台乃网页浏览器所供之开发者工具，用以显JavaScript代码于网页运行时所生之讯息、警示、错误及调试之信息也。
何谓控制台之错？
此乃凶险之所在也。
时尔之网站顾盼甚好…
…然JavaScript默然于背景中败绩矣。
例：
- 按纽之击不复效
- API之数据永未载入
- 表单拒纳
- 动画凝滞
- 诸构件尽隳
而昭其真者何在？
惟控制台耳。
彼微页，开发者漠视，直至生产之际方觉其患。
网页之弊，莫大者，莫过于此：
“若界面载，则万事毕。”
此言谬矣。
今之网页，甚赖JavaScript。
一脚本之失，可破认证、支付、搜索之能，亦可扰用户之互动，而页面犹显正常。
此乃调试之难处也。
时也，败绩昭然。
或用户先觉，而后开发者始知。
此乃苦痛之虫也。
尤以事端惟现于特定浏览器、设备或网境之时为甚。
控制台之助，可揭隐患于用户始发如“尔之网不工”之讯之前。
“嘿……尔之网不工。”
此实乃每程匠之最恶之报。
五种最常见之JavaScript控制台错误
吾辈当遍历诸开发者所遇之谬误.
此乃“初涉JavaScript”之谬误.
而趣事在于…
汝辈永难全避之.
纵使经验丰富者，犹恒误触此谬.
所异者，今已少惊慌.
大抵然。
引用錯誤
盡其常也
茲示其例
console.log(username)
然其實變數者
let userName = "John"
控制台言
ReferenceError: username is not defined
此意何在
JavaScript 寻觅 username.
乃搜之.
乃受之苦.
竟无所获.
浏览器基本检视内存，而言曰：
“吾实不知此变量为何物。”
官方定义
乃 JavaScript 试图访问未尝宣示或于当前域中不可得之变量标识时所生之谬误。ReferenceError
其故何在？
大抵有此数端：
- 名号之讹误
- 变量之名失当
- 未宣而先用
- 域之乖剌
此误于大应用中甚为常见，盖因变量流移于众文件、众函数、众组件之间也。
一毫命名之失，即可倾覆全局。
且因JavaScript重大小写：
userName
及
username
与
何其迥异.
此中有时似失礼.
调整之法
- 检视：
- 大写字母
- 拼写
- 变量存否
其宣告之位
userName !== username
JavaScript 擅察大小写.
诚然，其确乎在意.
一善习乃用编辑器自动补全，毋须屡次手动键入变量名.
此可大减愚谬之失.
且信我言…
多 debugging 之会，始于一愚谬之失.
2. 语法之误
此者，谓汝之代码结构有失。
举例如是：
if (true {
console.log("Hello")
}
缺漏
)
控制台：
SyntaxError: Unexpected token '{'
官方定义
一SyntaxErrorJavaScript逢违其语法规式之码，则阻其解析与执行。
何故如此
盖常因此也。
- 括号缺失
- 遗落逗号
- 括号之外
- 句法有误
此误发生于汝之码未行之前。
浏览器尝欲读汝之JavaScript文件…
…然立时放弃。
思之如句中语法之残缺。
若结构不合法，JavaScript不能解汝之指令。
苦痛之所在
一括号之失，可破全文。
尔将耗二十分之刻，以察错…
然所觉者，乃此：
}
阙矣.
造字之工.
而所阙之括，恒隐于至隐之境.
尤在层叠之条件内.
例：
if (loggedIn) {
if (isAdmin) {
console.log("Welcome")
看似无害
已完全损毁
是故，格式对齐之要，甚矣
善为格式，实可免调试之苦
3. 类型错误
此乃用之不当之时所生
例：
const user = null
console.log(user.name)
控制台：
TypeError: Cannot read properties of null
译文以人言
JavaScript曰：
“汝欲求存乎无物。”
此常发生于开发者未得数据而妄以为有之时。
而时下之网应用，恒与异步数据周旋。
是故此误，遍现于世。
官方定义
一TypeError，乃值以非道之用而发，如欲取undefined之属，或呼其法。null.
此情多发于何处
尤以与：
- API
- DOM元素
- 异步数据
- 数组
- 表单
例如：
document.getElementById("btn").addEventListener(...)
然按钮未现。
轰然.
谬误.
复有一常境：
后端返异数据.
尔期：
user.name
然API应曰：
null
今尔前端崩坏矣.
忽焉调试若侦探之役.
荷何以解之
先察其值存否：
if (user) {
console.log(user.name)
}
或用可选链法：
console.log(user?.name)
微渺之司.
广博之宁.
亦可循守御之习，以度外物之变.
盖终将…
必至.
4. 未获应允之误
此误显于异步之失.
例：
fetch("/api/data")
若请求失败：
Uncaught (in promise)
官方定义
当一Uncaught Promise Error被拒绝，而拒绝未被.catch()或try...catch妥善处理时，即发生一__JHSNS_SEG_72f79449_288__。
为何此感困惑
盖谬误非立时现也.
乃后时方发.迟而后至.是故排诘若逐魅影.
异步之JavaScript，易谬误之行止.
非立时败绩，乃潜行于背景之中.
及物有毁，则其谬若与本码绝离矣.
是故，异步调试初临，令人惑矣.
如何正处之
用try...catch之术.
async function loadData() {
try {
const response = await fetch("/api/data")
const data = await response.json()
console.log(data)
} catch (error) {
console.error(error)
}
}
今非默然崩坏，实可御其谬矣.
是重大之进益.
善处谬误于实应用中至为紧要.
盖因网络或溃.
服务器或崩.
用户失其网联.
API或超时.
而生产之应用必能从容度此困厄.
5. 未能载资源
此误常示：
“浏览器试载某物而失。”
或为：
- 图像
- API
- CSS之文
- JS之文
- 字型
例：
Failed to load resource: 404
官方定义
与Failed to Load Resource之失，乃浏览器不能自服务器成功取所求之文或资也。
404之真义
尔浏览器寻一文书…
…而服务器但云：
“未尝闻之。”
A404之误，乃所求之资不在其位也。
其资或为：
- 图像
- API之途
- JavaScript之文
- CSS之文
- 或全页之文
路径一字之误，足以致此。
然或时网站犹有偏功，致弊端非立时可察。
是故匠者恒察Console与Network之页，共解其惑。
正式定义
404 Not Found之状态码，谓服务器虽达，然所求之资源于指定URL处不可得。
复次，吾尝详述HTTP状态码之理，如404、403、500诸般，并及其他服务器之玄机，皆载于下：
若汝于调试之际尝惑于此数，彼文乃深释之。
常见之由
- 路径之误
- URL中谬误
- 文件之删
- 后端服务器未启
或有开发者更易文件名，然忘更正导入路径。
时，前端之码索求一API端点，然其已不复存矣。
时，后端之服务器竟不运行。
时…
尔耗一时辰以排之，方觉所书非是：
/api/user
而非：
/api/users
痛.
开发者之最大谬误
见误…
…遽索之:
how to fix uncaught promise javascript stackoverflow
未尝读误.
此乃实情:
多數遊戲機錯誤，直白示之症結。
例：
Cannot read properties of undefined
此非玄奧。
此乃JavaScript直告：
「某物未定。勿假作其存。」
至要之能，在於緩行細讀。
诸多调试之误，起于开发者之急躁。
彼等以为。
彼等惊惶。
彼等随机更易代码，冀其或效。
然调试之效，一旦视误为鉴而非敌，则骤然大进。
控制台常示：
- 误之类别。
- 文件之名。
- 行号
- 时或竟至其致患之变量也
此信息至为宝贵。
吾实如何排错Console之误
此乃吾之实然之程也。
非炫丽之YouTube版本也。
第一步 — 读首行
非全栈跟踪。
惟首句意深.
例：
ReferenceError: user is not defined
此已足启人深思.
多者因遽览全报而眩惑.
然首句已明其本.
首注于此。
步骤二 — 寻文件及行号
控制台常示：
app.js:42
按之。
浏览器直引至问题之域。
此功能独有，时感违法。
既用源码映射，复以良善调试之器，则察弊之速大增。
今之浏览器，诚为绝妙之调试境也。
第三步——用console.log()
然。
犹是。
即老成之匠，亦恒用之。
例：
console.log(user)
console.log(data)
console.log(response)
汝实乃审汝之码也
汝问曰
“汝今实存何物？”
而控制台诚然答之
有时调试者不过打印值，直至事理复明
步第四—隔离其弊
勿审全应用也
辨一事。
问曰：
- 其变量未定义乎？
- 其 API 失灵乎？
- 其元素缺失乎？
- 其函数竟不运行乎？
察误易，若视之为惑则难。
一旦析其败处，众弊皆可驭矣。
一概求全，徒增迷惘。
台机实为师也
此言虽似悲壮，然实为真。
每台主机之谬误，皆教人知之。
- JavaScript何为而作
- 浏览器之行也如何
- 异步代码之流转
- 何谓范围之运作？
- 何谓DOM渲染之道
进益最速者，常为善察谬者。
非徒记诵教程者。
盖真实之学，恒在事坏之后，未尝先之。
非先于事。
每谬必使君深悟其言实之性。
时日既久，君不复畏其差谬矣。
尔始学之。
一要事无人告尔
工于技者犹得台谕之误。
日日如是。
所异者：
初学者惶惑。
老成者则察之。
是已。
无所谓“吾不复得谬误”之境。
唯余：
“今吾知速觅其症矣。”
纵资深者，亦需时日以解诡惑之困.
其异者，惟经验助其速筛其途.
然无人能尽避谬误.
此乃软件开发之常情耳。
诚然，若汝之主机恒净无尘……
汝必未营造多物。
终篇之思
若汝之主机现满赤文……
善。
甚矣。
是谓汝在营造。
在毁坏。
在习得。
此系列所言之事，正如此。
日曜源流——我破之，乃释之。此系列非为完美代码而生。
乃为洞悉事崩之后之乱象。
诚然乎？
JavaScript之谬误，乃汝生平至善之师。
初时，控制台之境，令人目眩。
然终有所悟，彼赤色之讯，实助吾进益也。
每遇纷乱之虫，皆砺吾耐心。
每度排错之程，皆增吾解难之能。
每见差谬，渐使吾明软件幽微之理。
复奇者，
此实编码之至乐也。
行将远行…
有问简矣：
哪种终端之误最令汝烦？
undefinednull404Unexpected tokenUncaught promise
凡为匠者，皆有一误，此误，立毁其心绪。
无须惊惶
当此之际，解之勿惊
待至第五回，再会。