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

Chrome 開發人員工具(developer tools)

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

(啟用dev tools 後, 的顯示畫面)

如何啟用

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

也可以從 chrome 選項中開啟, 並不會太難找到
更多工具 > 開發人員工具

(有很多種方式打開 dev tools, 並不會太難)

打開之後畫面會出現一個遮住了半邊網頁的視窗….
看見密密碼碼的英文, 不要太慌張!
在這裡我用 中時電子報當作範例…

(dev tools 會顯示出目前所在網頁的原始碼)

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

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

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

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

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

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

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

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

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

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

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

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

註1：網頁的瀏覽原理

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

註2：網頁原始碼&HTML

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

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

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