最近聽說了一個概念，叫做“知識的詛咒”，大概的意思是，人們總會高估自己的表達、和別人對於自己所表達的東西的理解程度。也就是說，我們大家對於自己所熟知的一些事物，本能地會認為與自己有交流的人也會熟知，但是呢，對方可能只是在一臉懵x地看著你在那裡胡言亂語。

一個2歲的娃，真的能理解3？

這也大概能理解為什麼很多人一給娃教作業就發飆，你其實只是一廂情願地認為娃的這些作業都很簡單。同時，也是大多數家長會在初二左右自動退出學生作業輔導活動的原因。

### 需要準備

最近因為疫情原因，娃娃都在家裡，這學期的課本被很多好心人放在網上，家長可以自己去打印給娃。

然而，給娃打印作業的各種姿勢，卻是五花八門，無所不用其極，最牛最快捷的是下面這位，都不用打印出來就給做完了：

用保鮮膜寫作業

還有手機上面截圖的、電腦上面截圖的、拍照片的、之後再去打印的，或者直接手抄的，，等等。

其實呢，截圖、拍照這些方式，會把原來的文字或者圖片變得更加模糊，打印之後會更加難以閱讀和辨認，對娃的視力也是一種不好的影響。哪如何才能儘量地保留原來的清晰度的情況下將網頁給打印出來呢。

回到今天要提的`Chrome DevTools`，我有時候會把它叫做`谷歌瀏覽器自帶的開發工具`，或者“檢查工具”，因為在一般的網頁，右鍵菜單裡面有一項叫做”檢查“。

所以呢，最好是，有一臺電腦，以及電腦上安裝了Chrome瀏覽器，搜”chrome “的話，一般除了廣告之外的第一個結果就是它的官網，安裝很輕鬆簡單，很快就好。

這時候，使用Chrome瀏覽器打開任意一張網頁，右鍵，點擊檢查（或者直接按`F12`）就會在頁面的下方（也有可能是右方）打開Chrome的檢查工具，長這樣：

Chrome DevTools初始界面

可以看到，在它的最頂部分了幾個標籤頁，分別是Elements、Console、Sources、Network、Perfornance、Memory、Application、Security、Audits，比較常用的前面四個，Elements，主要拿來操作頁面的標籤；Console是一個命令行控制檯，可以直接在這裡輸入javascript語句來執行；Sources，用來管理當前網頁所加載到的一些資源，比如圖片，樣式表，js，字體還有其它；network用來查看這張網頁加載的全部請求響應過程，可以直觀地看到一張網頁加載所耗費的時間。

### 使用Elements操作頁面元素

接下來實錘，比如王碼的官網就有一張非常神奇的網頁，是五筆的一本教材，

<code>www.wangma.net.cn/InfoMationDetail.aspx?sm=5&m=207/<code>

頁面的圖片放得很厚道,原圖級別，用來自己打印，的確是極好。

可是，我們只是想要這些圖片，而頁面的頭部，尾部的部分是多餘的，就把它們給取掉吧。

第1步，先按`F12`開開檢查工具，點擊左上角的按鈕，進入頁面元素選擇的模式，這樣子就可以在頁面上面點擊，能快速定位到相應的源代碼。一圖勝千言：

選擇頁面最頂部的header部分，然後使用`delete`刪除他們

第2步，繼續找到頁面的底部foot的部分、正文的標題部分，刪除他們，至此，頁面上面再沒有其它影響主體內容的元素了，見下圖：

刪除頁腳的元素，避免打印多餘的無關內容

第3步，

紙張方向、頁邊距、縮放幾個參數相互配合調整可以組合出我們想要的結果

至此，Chrome瀏覽器的檢查工具算是也見了面了，刪除幾個頁面元素（頁面標籤）這種操作，在它的其它強大功能面前，只是冰山️一角。下一篇準備看看Console標籤下如何輸出`Hello World`。

### 保持好奇，不斷探索

如果你足夠好奇，可以自己去嘗試一下，學會這一套操作之後，以後給娃整理要打印的作業，也多了一種比較方便並且不會損失清晰度的方式。

2021239320

閱讀更多 學邊成 的文章

關鍵字: 熟知 2019科技之光 Chrome