日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

任何一門編程語言，在學(xué)習(xí)之前都應(yīng)該先弄清楚它的調(diào)試方法，畢竟沒有不挖坑的人類！

程序一旦出現(xiàn)問題，第一時(shí)間就是找到問題出在哪兒，其次才是拿出解決辦法。如果都找不到問題原因，那又何從談起解決辦法呢？

如何排查編程問題，這就是一門藝術(shù)了，同樣的問題，也許 A 只需要 10 分鐘，B 可能需要 30 分鐘，C 可能束手無策。

調(diào)試方法不僅僅可以用于問題排查，還能用于運(yùn)行結(jié)果輸出，能讓枯燥的學(xué)習(xí)多那么一點(diǎn)點(diǎn)樂趣~~

PC 端調(diào)試手段

console 輸出

瀏覽器內(nèi)置的輸出方法，可以很方便地看到運(yùn)行結(jié)果，也能幫助我們定位程序問題。常用方法：

console.log() // 輸出 log 日志級別的變量值或信息。
console.info() // 輸出 info 信息級別的變量值或信息。
console.error() // 輸出 error 錯(cuò)誤級別的變量值或信息。
console.warn() // 輸出 warn 警告級別的變量值或信息。
console.trace() // 輸出函數(shù)調(diào)用堆棧
console.table() // 以表格形式展示數(shù)組/對象
console.time() // 計(jì)時(shí)器
console.timeEnd() // 計(jì)時(shí)結(jié)束，查看計(jì)時(shí)結(jié)果

console 掌握以上幾個(gè)常用方法已經(jīng)足夠了，當(dāng)然它還有其他一些不太常用的方法，比如：

console.assert() // 斷言
console.clear() // 清空控制臺
console.count() // 計(jì)數(shù)器
console.countReset() // 重置計(jì)數(shù)器
console.debug() // 輸出調(diào)試信息
console.dir() // 輸出對象結(jié)構(gòu)
console.dirxml() // 輸出 XML 結(jié)構(gòu)
console.group() // 分組
console.groupCollapsed() // 收縮分組
console.groupEnd() // 結(jié)束分組
console.profile() // 開始性能分析（非標(biāo)準(zhǔn)，存在兼容性）
console.profileEnd() // 結(jié)束性能分析（非標(biāo)準(zhǔn)，存在兼容性）
console.timeLog() // 輸出計(jì)時(shí)器
console.timeStamp() // 輸出時(shí)間戳（非標(biāo)準(zhǔn)，存在兼容性）

提到 console ，那么就不得不提瀏覽器的開發(fā)者工具了，因?yàn)?console 輸出的內(nèi)容，都是在開發(fā)者工具--控制臺中展示的：

示例：

console.time() // 開始計(jì)時(shí)器
console.log('日志信息', 'hello world', {a: 'b'})
console.info('信息', 'hello world', {a: 'b'})
console.error('錯(cuò)誤信息', 'hello world', {a: 'b'})
console.warn('警告信息', 'hello world', {a: 'b'})
console.trace('追蹤信息')
console.table([{a: 'b'}, {a: 'c'}])
console.timeEnd() // 結(jié)束計(jì)時(shí)器，查看計(jì)時(shí)結(jié)果

以上代碼可以直接在開發(fā)者工具--控制臺中執(zhí)行，看看執(zhí)行效果：

您的瀏覽器控制臺可能不支持粘貼代碼，會提示讓您輸入 allow pasting，可在控制臺中輸入 allow pasting 之后回車就能粘貼代碼了！

注意看最后的 default: xxx ms，這表示 time 到 timeEnd 的執(zhí)行時(shí)間，截圖中就表示我們代碼執(zhí)行耗時(shí) 0.66ms，所以這兩個(gè)方法也能用于我們的代碼性能檢測，分析出哪些代碼耗時(shí)太長，便可以針對耗時(shí)長的代碼做優(yōu)化。

debugger 語句

在代碼中插入 debugger;，當(dāng)瀏覽器開發(fā)者工具打開時(shí)自動(dòng)進(jìn)入中斷。

const test = '112233';
function foo() {
    const test1 = '123';
    const test2 = '321';
    const test3 = test1 + test2;
    debugger;
}
foo()

控制臺執(zhí)行以上代碼，開發(fā)者工具將會進(jìn)入中斷，此時(shí)可以看到當(dāng)前程序狀態(tài)：

控制按鈕 可以程序繼續(xù)執(zhí)行、跳過下一個(gè)函數(shù)調(diào)用、進(jìn)入下一個(gè)函數(shù)、跳出當(dāng)前函數(shù)、單步調(diào)試、停用斷點(diǎn)等。
監(jiān)視 可以添加自定義表達(dá)式查看程序狀態(tài)。。
本地 和 全局 可以查看當(dāng)前程序作用域中的變量。
調(diào)用堆棧 可以查看當(dāng)前程序的調(diào)用順序。

斷點(diǎn)調(diào)試

可在 源代碼/來源（Sources） 面板中添加斷點(diǎn)進(jìn)行調(diào)試，與 debugger 類似，不同地方在于 debugger 語句需要添加在代碼中，而 斷點(diǎn)調(diào)試 只需要在面板中打上斷點(diǎn)即可。

示例代碼：

<script>
  const test = '112233';
  function foo() {
    const test1 = '123';
    const test2 = '321';
    const test3 = test1 + test2;
    return test3;
  }
  foo()
</script>

斷點(diǎn)調(diào)試演示：

網(wǎng)絡(luò)調(diào)試

開發(fā)者工具中的網(wǎng)絡(luò)（Network）面板，可以查看所有的網(wǎng)絡(luò)請求，包括請求頭、響應(yīng)頭、響應(yīng)內(nèi)容、網(wǎng)絡(luò)耗時(shí)等等。

也可以對網(wǎng)絡(luò)請求節(jié)流，模擬低網(wǎng)速環(huán)境下網(wǎng)頁響應(yīng)狀態(tài)等。

性能、內(nèi)存面板

開發(fā)者工具中的兩個(gè)高階技能，一般多用于性能優(yōu)化。

性能（Performance）面板：錄制代碼執(zhí)行過程，分析耗時(shí)函數(shù)
內(nèi)存（Memory）面板：抓取堆快照，排查內(nèi)存泄漏。

開發(fā)者工具的其他手段

日志點(diǎn)：右鍵行號設(shè)置，無需修改代碼輸出日志。
條件斷點(diǎn)：僅在滿足條件時(shí)中斷（如循環(huán)特定索引）。
黑盒腳本（Blackbox）：忽略第三方庫/框架的內(nèi)部代碼，聚焦業(yè)務(wù)邏輯調(diào)試。

框架專用工具

React Developer Tools 檢查 React 組件狀態(tài)、Props及Hooks，分析組件渲染性能。

Vue Devtools 查看Vue組件樹、狀態(tài)和事件。

善用無痕模式

瀏覽器無痕模式，可以屏蔽瀏覽器的三方插件，避免緩存影響。有時(shí)候某個(gè)問題可能就是某個(gè)插件或者三方緩存造成的，這時(shí)候使用無痕模式可以分分鐘定位問題。

移動(dòng)端調(diào)試手段

移動(dòng)端沒有內(nèi)置開發(fā)者工具，程序調(diào)試不像 PC 端那么方便，這時(shí)候必須借助相關(guān)開源工具了，比如：

vConsole

vConsole：騰訊開源的輕量級網(wǎng)頁控制臺，集成日志、網(wǎng)絡(luò)請求、設(shè)備信息查看等功能。

使用方法：必須在代碼中引入并開啟工具。

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script>
<script>
  new VConsole();
</script>

效果：

Eruda

Eruda：功能更豐富的控制臺，支持元素檢查、性能分析、本地存儲查看等。

使用方法：必須在代碼中引入并開啟工具。

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.4.1/eruda.min.js"></script>
<script>
  eruda.init();
</script>

效果：

Chrome遠(yuǎn)程調(diào)試

手機(jī)端 Chrome 瀏覽器，通過 USB 線連接電腦，可在電腦端查看手機(jī)端網(wǎng)頁的調(diào)試信息。

1、手機(jī)開啟USB調(diào)試模式（開發(fā)者選項(xiàng)中）。
2、用USB連接電腦，Chrome訪問 chrome://inspect/#devices。
3、點(diǎn)擊對應(yīng)頁面下的 Inspect，直接使用PC版DevTools調(diào)試。

抓包工具

PC 端代表軟件：Charles、Fiddler。

Node.js抓包工具：Whistle。

手機(jī)端抓包APP：HttpCanary（Android）、Stream（iOS）。

抓包工具可不僅僅用于抓包。

1、可以用來分析網(wǎng)絡(luò)請求，比如查看各種請求內(nèi)容是否正常。
2、可以模擬網(wǎng)絡(luò)請求各種狀態(tài)，比如請求超時(shí)、無網(wǎng)絡(luò)、404、500等。
3、可以偽造請求內(nèi)容，比如偽造一個(gè)接口的響應(yīng)數(shù)據(jù)，用于模擬后端接口返回?cái)?shù)據(jù)。

手機(jī)抓包步驟：

1、PC 安裝 Charles 或者 Fiddler，設(shè)置代理端口（默認(rèn)8888）。
2、手機(jī)與PC同一網(wǎng)絡(luò)，Wi-Fi設(shè)置手動(dòng)代理（IP 為 PC 內(nèi)網(wǎng)地址，端口8888）。
3、安裝證書以捕獲HTTPS請求。

以 Fiddler 為例：

所有的 http 和 https 請求都會被軟件捕獲，我們可以查看所有被捕獲的請求，也可以修改它們。

終極手段

有時(shí)候可能所有的調(diào)試手段都用上了，但就是找不到問題，這時(shí)候可以嘗試刪除部分代碼，直到刪到?jīng)]問題為止，基本就能定位到有問題的代碼了。

寫在最后

調(diào)試手段不僅僅可以用于開發(fā)調(diào)試，還能用于線上環(huán)境問題定位，模擬程序的各種異常情況，提升程序的健壯性。

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18877259