這個檔案：node_modules\cypress\bin\cypress

裡面的內容：

```javascript
#!/usr/bin/env node

require('../lib/cli').init()

```

![](https://img-blog.csdnimg.cn/img_convert/be2b318d66ba6f8eba64170b1516a75a.png)

很多 require：
![](https://img-blog.csdnimg.cn/img_convert/932008c3431094ea75be0e2201c52779.png)

找到 init 方法：
![](https://img-blog.csdnimg.cn/img_convert/a8719d71d2321ed38f33426607dfa835.png)

我們執行的 yarn cypress:open, 執行的應該是這個 open.js 檔案裡的內容吧。

![](https://img-blog.csdnimg.cn/img_convert/cc07a0f0e09183c7c32fbfd2da35bbe8.png)

驗證一下就知道了。在 open.js 裡新增一行列印語句。如果我們重新執行 cypress:open, 並且看到了這條列印語句，說明我們的猜想是正確的：
![](https://img-blog.csdnimg.cn/img_convert/4f2137a603f764020f25963306ba7672.png)

果然，我們的猜想是正確的。

![](https://img-blog.csdnimg.cn/img_convert/fd33b819e0724e72f042ea9c8313321c.png)

下一個問題：如何除錯 cypress:open 這個啟動過程本身？

我們再回到 .bin 資料夾下的 `cypress.cmd` 檔案，如何知道執行時我們執行的是圖例1 還是圖例2 的 if 分支呢？故意將 if 分支裡的路徑胡亂修改一下，然後執行，根據報錯的訊息即可判斷。

![](https://img-blog.csdnimg.cn/img_convert/834ed0c1ed84c7a869b58faf3cf68b68.png)

執行時，試圖查詢 cypress2，說明進入上圖的 else 分支：
![](https://img-blog.csdnimg.cn/img_convert/ad8814102005e8ee4ae199615d066165.png)

那麼我們就給這個分支加上 `--inspect-brk` 的 option：
![](https://img-blog.csdnimg.cn/img_convert/859a7416c4edf4445638d9b3418a05f5.png)

重新執行，現在應該就可以單步除錯了：

![](https://img-blog.csdnimg.cn/img_convert/a7070675b02cc8fe21bbb8d748df15db.png)

果然，現在停在了 `require('../lib/cli').init()` 這行語句，我們就可以單步除錯 Cypress 了：
![](https://img-blog.csdnimg.cn/img_convert/343f93a56d702d0db9f6ce0d198d5eb2.png)

開始單步除錯，從 process.env 傳遞進來的命令列引數：open：

![](https://img-blog.csdnimg.cn/img_convert/fcd17cafff8d652b9c57ceb606bbcb30.png)

建立一個新的 command 例項：
![](https://img-blog.csdnimg.cn/img_convert/5767a13c18e7d69a835791ffc7f51252.png)

這裡載入 exec 資料夾下的 open.js 檔案，執行對應的 module：

![](https://img-blog.csdnimg.cn/img_convert/c02473747aff6b45a6a4216e47fe89ee.png)

在 open.js module 的 start 函式里設定斷點：

![](https://img-blog.csdnimg.cn/img_convert/ffb296a6d98bdb75a66923a657b40f0a.png)

工作目錄：
![](https://img-blog.csdnimg.cn/img_convert/dee6b4e1d97bfccfec4de69ba96bdb24.png)

這裡引入一個問題，這個 debug module 如何開啟除錯模式？

![](https://img-blog.csdnimg.cn/img_convert/806b82598df9e673f3e144f3c76adf10.png)

輕量級：
![](https://img-blog.csdnimg.cn/img_convert/07fa9f17217749951e31e02168af72c1.png)

![](https://img-blog.csdnimg.cn/img_convert/dcd2a273d463cc49574824c3429ac68a.png)

居然是這個 path：
![](https://img-blog.csdnimg.cn/img_convert/2d4f30b14432de8969a6a482c9c6079c.png)

C:\Users\I042416\AppData\Local\Cypress\Cache\8.5.0\Cypress

這還有一個 exe 檔案：足足有 130 MB：
![](https://img-blog.csdnimg.cn/img_convert/7074e7527469155e4b086a4fbf163a22.png)

一個 windows 客戶端：
![](https://img-blog.csdnimg.cn/img_convert/942b0ed453d3235970853add167013f1.png)

未完待續。

Cypress 本身啟動過程的除錯

相關文章