:::

輕鬆調整網頁元素!在Chrome的Console使用jQuery / How to include jQuery in Chrome's Console

image

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必須跟網頁一起使用。就讓我們以「布丁布丁吃什麼?」為例,一起來操作看看吧。

image

開啟Google Chrome的Console的方法很多,最簡單的做法是先按「F12」鍵。

image

然後切換到「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')

image

順利的話就會看到上圖的訊息:「jQuery Injected」,表示已經可以使用jQuery了。

用書籤引用jQuery / Inject jQuery via Bookmark

image

這篇的另一個教學是教大家使用Bookmarklet來引用jQuery。

做法很簡單:

  1. 請把下面這個「Inject jQuery」按鈕拖曳到你的書籤列:
    Inject jQuery
  2. 點選該書籤,網頁就會載入jQuery了。

3. 測試使用jQuery / Test jQuery

讓我們用一段簡單的jQuery程式碼,數數看網頁中「div」元素的數量。

$("div").length

image

結果就會直接回傳在Console上囉。關於jQuery的各種用法,請參考jQuery的使用手冊吧。


結語 / In Closing

最近我常常在整理各種文件。有Excel試算表的檔案、有Word文件的檔案、甚至也有PDF這種不能修改的檔案。我要把這些文件整理成特定格式,但總不能一直花時間做複製貼上的動作吧。所以我就把這些文件轉換成HTML網頁,然後利用jQuery快速整理大量資料。效率意外地很不錯呢。

而且動動腦用jQuery整理資料也好過用機械性地操作鍵盤滑鼠,還可以避免腕隧道症候群喔。