工具

如何破解鎖右鍵的網站, 利用開發人員工具(開發者模式)!

chrome logo常常碰到某些網站鎖右鍵或是禁用滑鼠右鍵
讓你沒辦法下載、儲存喜歡的圖片或是影片
其實有很簡單的方式就能讓你把他存下來, 或是取得原圖的網址(路徑)

那就是利用Chrome 瀏覽器內建的功能, 開發人員工具(開發者模式)

 

 

教學開始前, 先說說版權問題的(重要)事...
當然本文主要目的不是教大家怎麼偷圖、盜圖

我的重點是教大家怎麼利用開發人員工具(developer tools)
取得網頁上的圖片連結, 或是影片網址等....
這是一個方便工作、加速工作效率的的工具

而且市面上的鎖右鍵, 都只是防君子不防小人的方式
而且網頁運作方式, 其實對圖片檔本身也沒有保密的意義(註1:網頁的瀏覽原理)

總之! 怎麼使用這個工具, 由人決定!

 

 

Chrome 開發人員工具(developer tools)

(以下簡稱 dev tools)
主要的目的是讓網頁開發人員, 工程師、設計師等...
對網站做測試, 修正, debug 用的
about dev tools
(啟用dev tools 後, 的顯示畫面)

 

 

如何啟用

MAC : option + command + i
Windows : F12 或 ctrl + shift + i

也可以從 chrome 選項中開啟, 並不會太難找到
更多工具 > 開發人員工具
how to open dev tools
(有很多種方式打開 dev tools, 並不會太難)

 

打開之後畫面會出現一個遮住了半邊網頁的視窗....
看見密密碼碼的英文, 不要太慌張!
在這裡我用 中時電子報當作範例...
dev tools and source code
(dev tools 會顯示出目前所在網頁的原始碼)

 

到這邊, 如果你看的懂 HTML 的話,
應該就知道接下來可以做些什麼了(註2: 網頁原始碼&HTML)

 

首先看看下圖
先確定你位在 Elements 頁籤(如下圖 綠框)

  1. 點擊 dev tools 最左邊的 檢查器/inspect (如下圖 紅框1)

2.這時候你的滑鼠在網頁上, 會變成一個半透明灰色的選取狀態
把滑鼠移到圖片上方點一下滑鼠左鍵, 讓整個圖片區塊呈現選取狀態(如下圖 紅框2)

3.看到最下方的 dev tools 原始碼區塊, 圖片的網址已被用藍色連結的方式顯示出來
滑鼠移到網址上方, 還會有圖片預覽出現(如下圖 紅框3)

dev tools step by step
(點擊圖片另開大圖, 如何找到圖片網址的教流程..)

 

 

接著對圖片網址, 連點兩下
就可以輕鬆取得圖片網址了
get img url

整個過程很簡單
用順手之後, 其實真的不難~

雖然破解鎖右鍵, 並不是開發人員工具本來的用途
不過用來檢查、取得圖片連結, 是一個非常方便的工具(其實標題的鎖右鍵只是個偽議題 XD)

非工程師人員, 學會怎麼使用開發人員工具能在工作上非常有幫助
這個工具絕對不是工程師的專利哦

 

 

加註...
另外, 我們也可以利用 dev tools 的 Network 頁籤 做到一樣的目的

下圖, 把整個頁面的圖片列出來
只要簡單設定 過濾/Filter 功能, 能把指定的檔案類型全列出來dev tools network
(利用 Network 的方式列出整個頁面的圖片)


註1:網頁的瀏覽原理

其實在你送出網址之後, 目標題網站的圖文字內容, 圖片都已經下載儲存到你電腦裡裡的某處了
也因為這樣, 你才能又看又完整的看到整個頁面上的內容
而且不是網頁捲動到哪, 畫面上的東西才慢慢出現.

 

 

註2:網頁原始碼&HTML

HTML 超文件標示語言
HTML Wiki ,你所看見的網頁畫面, 是透過一堆英文字和指令、標籤, 產生出來的

範例:
<u>這是一段有底線的文字</u>

上面的底線文字, 就是利用 html 呈現出來的

2 Comments

發表迴響