整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文作者從開發者角度出發，介紹了幾個關于 Chrome 開發者工具的高級用法。熟練使用這些高級用法可以大大地提高你的生產力。如果你選擇 Chrome 作為開發環境，那么你應該知道下面關于它的 11 個使用技巧。
圖片來源 Morning Brewon，Unsplash
好了，現在由于某種原因，你最終選擇了 Chrome 瀏覽器作為開發及調試的環境。接下來，打開開發者工具并開始調試代碼。
很多時候你可以打開“控制臺”面板來檢查程序的輸出，或者打開“元素”面板來檢查 DOM 元素的 CSS 代碼。
但是你真的了解 Chrome 開發者工具嗎？實際上，它提供了許多強大但很多人未知的功能，可以極大地提高我們的開發效率。
在這里，我將介紹幾個最有用的功能，希望能對你有所幫助。
在開始之前，我想介紹一下 Chrome 的命令菜單。命令菜單之于 Chrome，就像 Shell 之于 Linux 一樣。你可以在鍵盤敲入相應命令來操作 Chrome。
首先，我們打開 Chrome 開發者工具，然后使用以下快捷鍵打開命令菜單：
或者我們可以按照下圖所示的步驟將其打開：
然后，我們可以轉到“命令”面板，在這里我們可以輸入一些命令來執行很多強大的功能。
捕獲屏幕內容是一個非常常見的功能需求，當然我非常確定在你當前的計算機上已經有了非常方便的截圖工具了。但是，你可以完成以下任務嗎？
這是兩個很普通的要求，但是使用操作系統隨附的屏幕截圖工具不太容易解決。這個時候，我們可以在 Chrome 使用相關命令來幫助我們完成此要求。
上面兩個需求的對應的命令是：
舉個例子
現在可以打開任意的網頁，例如，Medium 上 JavaScript 的熱門文章頁面。
https://medium.com/tag/javascript
打開“命令”菜單并執行Screenshot Capture full size screenshot。
然后，我們可以就獲得當前頁面的完整屏幕截圖了。
上面的原始圖像實際上非常清晰，只是在這里我上傳了壓縮圖像以節省你的流量。
同樣地，如果要截取某個 DOM 元素的屏幕截圖，就完全可以使用系統自帶的屏幕截圖工具，但當窗口不能完全捕獲該元素內容時，此時，你可以使用Capture node screenshot命令。
首先，我們在“元素”面板中選擇一個元素，然后運行Capture node screenshot命令，如下圖所示。
下面是準確的屏幕截圖的結果：
我們常常需要在控制臺中調試代碼。比如你想知道如何在 JavaScript 中反轉字符串，然后你在網絡上搜索相關信息并找到以下代可行代碼。
'abcde'.split('').reverse().join('')沒問題，上面的代碼確實對字符串進行了翻轉。但你還想了解 split()、reverse()、join() 這些方法的作用以及運行他們的中間步驟的結果。因此，現在你想逐步執行上述代碼，可能會編寫如下內容：
好了，經過上面這些操作，我們確實知道了每個方法運行的返回值，也就了解了各個方法的作用。
但是，這給人的感覺有點多此一舉。上面的做法既容易出錯，又難以理解。實際上，在控制臺中，我們可以使用魔術變量$_引用上一次操作的結果。
$_是一個特殊變量，它的值始終等于控制臺中上一次操作的執行結果。它可以讓你更加優雅地調試代碼。
XHR，即 XMLHttpRequest，是一種創建 AJAX 請求的 JavaScript API 。
在我們的前端項目中，我們經常需要使用 XHR 向后端發出請求來獲取數據。如果你想重新發送 XHR 請求，那么該怎么辦呢？
對于新手來說，可能會選擇刷新頁面，但這可能比較麻煩。實際上，我們可以直接在“網絡”面板中進行調試。
下面是一個 gif 示例，方便你理解：
從一開始完全加載頁面可能需要十秒鐘以上的時間。我們有時需要監控頁面在不同的時間點相關資源的加載行為。
在 Chrome 開發者工具中，我們可以使用“網絡”面板下的Capture Screenshots功能來捕獲頁面加載時的屏幕截圖。
單擊每個屏幕截圖可以顯示相應的當前時間的網絡請求狀態。這種可視化的演示會讓你更好地了解網絡請求的詳細過程。
你可以將 JavaScript 變量的值復制到其他地方嗎？
這似乎是不可能完成的任務，但是在 Chrome 瀏覽器中，有一個名為copy的函數可以幫助你實現這個功能。
該copy函數不是由 ECMAScript 定義的，而是由 Chrome 瀏覽器提供的。使用此功能，你可以將 JavaScript 變量的值復制到你的剪貼板中，方便在其他位置使用。
處理網頁上的圖像的通常有兩種方法，一種是通過外部資源鏈接加載它們，另一種是將圖像編碼為 Data URI。
Data URL，即前綴為data:協議的 URL，允許內容創建者在文檔中嵌入小文件。在被 WHATWG 撤消該名稱之前，它們被稱為“Data URI”。
將這些小圖像編碼到 Data URL 并將它們直接嵌入到我們的代碼中，可以減少頁面需要發出的 HTTP 請求的數量，從而加快頁面加載速度。
所以在 Chrome 瀏覽器中，我們該如何將圖像轉換為 Data URL 呢？可以參考下面的 gif 圖像：
假設我們有一個下面這樣的數組對象：
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]這樣的數組在控制臺中不容易查看閱讀。如果數組更長，元素內容很復雜，那么該數據將變得更加難以理解。
幸運的是，Chrome 提供了表格展示功能，可以將數組對象進行列表展示，方便理解。
在很多情況下，該功能非常好用。
有時我們想調整頁面上某些 DOM 元素的位置以測試 UI。在“元素”面板中，你可以拖放任何 HTML 元素來更改其在頁面中的顯示位置：
上面的展示中，在“元素”面板中將某個 div 的位置拖動到其他位置，它在網頁上的展示位置就會同步更改。
>$0是另一個魔術變量，它會引用“元素”面板中當前選定的 DOM 元素。<是另一個魔術變量，它會引用“元素”面板中當前選定的 dom="">
CSS 偽類不僅可以讓你將樣式應用于文檔樹內容，還可以將其應用于外部元素，例如導航器的歷史記錄（例如:visited），其內容的狀態（ 例如某些表單元素的:checked），或鼠標的位置（例如:hover，它可以讓你知道當前鼠標是否在某個元素內容之上）。
我們可能為一個元素編寫多個 CSS 偽類，并且為了方便我們對這些樣式進行測試，我們可以直接在“元素”面板中選擇觸發或關閉這些樣式。
下面有一個測試網頁：
我們在瀏覽器中將其打開，然后通過“元素”面板對 CSS 樣式進行調試。
在調試 CSS 樣式時，我們通常需要隱藏一個元素。如果選擇元素并按下鍵盤上的H鍵，我們就可以快速隱藏該元素。
此操作實際上增加了visibility: hidden !important;樣式到對應的元素上面。
如果要想在控制臺中快速獲取某個 DOM 元素的引用，可以執行以下操作：
以上就是我想要介紹的 Chrome 開發者工具的高級用法，希望可以幫助到你。
作者介紹：
bitfish，Medium 平臺社區編輯，愛好閱讀、寫作和編程。
原文鏈接：
https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674
pire.XLS for Java 12.6.0 已發布。此版本支持在 Excel 轉 HTML 時設置是否轉出隱藏的工作表。同時，還增加了兩個新特性： Excel 轉 HTML 后，轉出的 HTML 中當前選中的選項卡添加了有對比性的顏色邊框以及工作表選項卡文本增加了兩側間距。此外，本次更新還增強了 Excel 到 HTML、 Excel 到 PDF 和 Excel 到圖片的轉換功能。一些已知問題也得到了修復，如復制工作表時迷你折線圖丟失和設置單元格背景色為透明不生效等問題。詳情請閱讀一下內容。
新功能:
Workbook book=new Workbook();
book.loadFromFile("test.xlsx");
//false --- 轉出隱藏的工作表
//true--- 不轉出隱藏的工作表
book.saveToHtml("output.html",false);問題修復:
下載Spire.XLS for Java 12.6.0 請點擊：
Spire.XLS for Java ｜ 下載
天給大家帶來的內容是9種效果很炫的html5和css3隱藏側邊欄導航菜單特效，當點擊主菜單按鈕的時候，側邊欄導航菜單將會出現。有彈射，波浪，氣泡等超酷的效果。
下面是展示效果，精彩不容錯過哦！
HTML結構部分：
CSS樣式部分：
由于源碼太多，影響展示效果，所以只能以這樣的形式發出來了，希望大家理解。
需要完整源碼和獲取更多內容的朋友敬請關注，該有的都會有的，很快！
最后，建議大家平時多看一些比較酷炫的特效，學會分析總結，自己再嘗試著去做出來，雖然說可能有的時候工作中用不到，但是在拓展思維方面還是有很大的作用的，以后工作起來會更加得心應手！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
