[Chrome] 尋找、下載網頁頁面中的任一資源(圖片、腳本...)



記得我們之前教過怎麼裝網頁上的影片了嗎?不記得得趕快複習一下「[Chrome] 不用任何擴充功能,Chrome 內建開發者工具讓您輕鬆下載任何影片!」,今天應網友要求(差點忘記答應網友要寫這篇了呵呵)要來教大家怎麼下載網頁的資源(圖片)

是不是覺得下載圖片有什麼好教的,右鍵另存新檔甚至直接拉到桌面上就可以很簡單啊?

如果圖片存檔真的就是直接拉到桌面上那麼簡單,那到底這篇的存在還有甚麼意義呢?


其實就是要教你說如果真的沒辦法直接把照片拉出來,或者右鍵「在新分頁中開啟影像」失靈的時候到底要怎麼快速的把照片抓出來!這邊就來舉三個可能會用到的例子吧~


這次用到的是「開發者工具」的 Resources 功能,還不知道怎麼叫出「開發者工具」的請跟著我按 F12 ,然後選擇資源「Resources」.. 好,您成功叫出來了!


第一種是遇到無法直接選取的影像,可能是因為在影像上面被放了透明遮罩阻擋了你的滑鼠,這種比較簡單,直接右鍵「檢查元素」找到圖片網址,或者用今天要教的,透過「開發者工具」看資源檔案的方法

右鍵「檢查元素」我們可以透過網頁原始碼找到影像網址,為了方便那天問問題的網友還隨手寫了個簡易的 js 來處理
location.assign(document.getElementById("main_img").getAttribute("src"))
恩.. 這不是今天的重點,往下看



透過我們剛剛說過 F12 叫出的「開發者工具」其中的資源分頁 Resources 我們可以看到網頁當中所有的檔案都顯示在裡面,當然也包括我們要找的那張照片啦!



Resources 底下有關於這個資源的詳細描述



第二種可能會遇到的就是這種,我很喜歡這個網站的背景,可是拉也拉不到,當我想用右鍵「檢查元素」時卻又選取了一整塊 div,這個時候慢慢找圖片在哪就沒效率拉(當然如果你堅持,你也可以 Ctrl+F 然後搜尋 jpg 或 png 等等影像格式看有沒有...)



一樣,透過剛說過「開發者工具」的資源分頁 Resources 我們可以很快地看到我想要的那張背景照片,想要儲存可以直接拉出去或點兩下開啟等等都可以...



最後一個可能會遇到的就是.. 有沒有覺得這網站很眼熟?
透過右鍵「檢查元素」我們找到了一個 gif 檔,這很顯然不是我們要的 Logo.. 不信?



你自己看吧!這個 gif 檔是空白的~



那我們要的 Logo 到底在哪呢?
其實他使用了 CSS Sprite 一種圖片的處理方式,將多張圖片合併在同一張圖檔中,然後根據 CSS 的描述將圖檔分區塊載入。所以我們看到 Logo 跟其他圖檔混在一起了!


其實,如果真的遇到 CSS Sprite 就直接用截圖比較快啦,不過如果想要品質好一點的圖片就把檔案載下來自己慢慢割囉 ^_^


留言

本月最夯

楓之谷洋蔥4.1.2 - 最後更新日期04/03

偷用電腦,怎知?事件檢視器全記錄!(開機時間、啟動項時間...)