輕鬆調整網頁元素！在Chrome的Console使用jQuery / How to include jQuery in Chrome's Console
Google Chrome (Google瀏覽器)的Console (主控台)不僅可以顯示來自JavaScript的錯誤訊息，其實我們也可以用它直接執行JavaScript程式碼。不過如果我們想要在Console使用JavaScript最流行的函式庫jQuery，那就必須執行一段JavaScript程式碼來引用jQuery囉。我參考「Include jQuery in the JavaScript Console」這篇的作法，跟大家分享如何在Google Chrome使用jQuery。
1. 開啟Console / Open Console
Google Chrome的Console必須跟網頁一起使用。就讓我們以「布丁布丁吃什麼？」為例，一起來操作看看吧。
開啟Google Chrome的Console的方法很多，最簡單的做法是先按「F12」鍵。
然後切換到「Console」頁籤，底下就會出現Console畫面了。雖然乍看之下Console中沒有任何東西，但我們可以在Console點一下，這時會出現輸入游標，接著就能夠輸入JavaScript程式碼了。
2. 引用jQuery / Inject jQuery Library
接著請把下面的JavaScript程式碼複製到Console中，按下「Enter」鍵執行。
javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();$=jQuery;console.log('jQuery injected')};document.head.appendChild(e);})(document.createElement('script'),'http://code.jquery.com/jquery-latest.min.js')
順利的話就會看到上圖的訊息：「jQuery Injected」，表示已經可以使用jQuery了。
用書籤引用jQuery / Inject jQuery via Bookmark
這篇的另一個教學是教大家使用Bookmarklet來引用jQuery。
做法很簡單：
- 請把下面這個「Inject jQuery」按鈕拖曳到你的書籤列：
Inject jQuery - 點選該書籤，網頁就會載入jQuery了。
3. 測試使用jQuery / Test jQuery
讓我們用一段簡單的jQuery程式碼，數數看網頁中「div」元素的數量。
$("div").length
結果就會直接回傳在Console上囉。關於jQuery的各種用法，請參考jQuery的使用手冊吧。
結語 / In Closing
最近我常常在整理各種文件。有Excel試算表的檔案、有Word文件的檔案、甚至也有PDF這種不能修改的檔案。我要把這些文件整理成特定格式，但總不能一直花時間做複製貼上的動作吧。所以我就把這些文件轉換成HTML網頁，然後利用jQuery快速整理大量資料。效率意外地很不錯呢。
而且動動腦用jQuery整理資料也好過用機械性地操作鍵盤滑鼠，還可以避免腕隧道症候群喔。
