Chrome瀏覽器及調試教程

==>（微信公衆號：IT知更鳥）歡迎關注<^>@<^>

Chrome瀏覽器及調試教程

　　在web開發過程當中，咱們在寫JavaScript腳本時不免會遇到各類bug，這時，咱們就須要去調試咱們的JavaScript腳本，而後去修改代碼。最簡單的調試方法就是使用alert方法，將可信息經過alert方法的彈窗顯示出來。可是，alert方法有幾個弊端：

1）alert方法在彈出窗口時會中斷程序；

2）在循環中使用alert（）方法時，若是不點擊alert彈窗的肯定按鈕，下一個alert就不會出現；

3）alert方法在顯示對象時永遠只顯示[Object]，沒法看到對象中的具體細節；

　　因爲alert方法存在上述缺點致使了alert方法只適合一些小程序。若是想要查看JavaScript腳本的執行過程，HTTP請求信息，執行過程當中的數據信息則須要學會使用瀏覽器的開發者工具進行調試。

　　從如下幾個方面來了解Chrome瀏覽器：

1.Chrome瀏覽器簡介及下載與安裝；2.瀏覽器加載Html頁面的過程；

3.Chrome瀏覽器開發者工具面板的介紹；4.使用Chrome開發者工具調試JavaScript腳本；5.Chrome瀏覽器的其餘設置；

---

 

1.瀏覽器簡介

瀏覽器的主要功能：

　　瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源。這裏所說的資源通常是指 HTML 文檔，也能夠是 PDF、圖片或其餘的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。

　　瀏覽器解釋並顯示 HTML 文件的方式是在 HTML 和 CSS 規範中指定的。這些規範由網絡標準化組織 W3C（萬維網聯盟）進行維護。

多年以來，各瀏覽器都沒有徹底聽從這些規範，同時還在開發本身獨有的擴展程序，這給網絡開發人員帶來了嚴重的兼容性問題。現在，大多數的瀏覽器都是或多或少地聽從規範。　

　　因此，瀏覽器就是一個獲取網頁並將它顯示給用戶的工具。

瀏覽器界面介紹：

瀏覽器的用戶界面有不少彼此相同的元素，其中包括：

用來輸入 URI 的地址欄

前進和後退按鈕

書籤設置選項

用於刷新和中止加載當前文檔的刷新和中止按鈕

用於返回主頁的主頁按鈕

瀏覽器的高層結構

瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。

呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。

網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。

用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。

JavaScript 解釋器。用於解析和執行 JavaScript 代碼，就是後面講到的JavaScript引擎。

數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML 規範 (HTML5) 定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

   目前使用的主流瀏覽器有五個：Internet Explorer、Firefox、Safari、Chrome 瀏覽器和 Opera。本文中以開放源代碼瀏覽器爲例，即 Firefox、Chrome 瀏覽器和 Safari（部分開源）。根據 StatCounter 瀏覽器統計數據，目前（2011 年 8 月）Firefox、Safari 和 Chrome 瀏覽器的總市場佔有率將近 60%。因而可知，現在開放源代碼瀏覽器在瀏覽器市場中佔據了很是堅實的部分。

---

 

2.瀏覽器加載Html頁面的過程

2.1  從輸入URL到頁面加載完成都發生了什麼？

1.處理URL:輸入 URL 後的「回車」，這時瀏覽器會對 URL 進行檢查，首先判斷協議，若是是 http 就按照 Web 來處理，另外還會對這個 URL 進行安全檢查，而後直接調用瀏覽器內核中的對應方法，好比 WebView 中的 loadUrl 方法。

2.發送HTTP請求：由於網絡的底層實現是和內核相關的，因此這一部分須要針對不一樣平臺進行處理，從應用層角度看主要作兩件事情：經過 DNS 查詢 IP、經過 Socket 發送數據，接下來就分別介紹這兩方面的內容。

2.1 DNS查詢：Chrome瀏覽器在啓動的時候首先會去加載你本地的host文件，若是URL中的域名在host文件中設置的有對應的IP地址，就會直接將這個域名指向這個地址。若是host中沒有URL中輸入的域名（www.baidu.com）對應的IP地址，瀏覽器就會去訪問DNS服務器，向DNS服務器詢問這個域名（www.baidu.com）對應的IP地址。

2.2 經過Socket發送數據：有了 IP 地址，就能夠經過 Socket API 來發送數據了，這時能夠選擇 TCP/IP 或 UDP 協議，HTTP 經常使用的是 TCP/IP 協議。Chrome此時就會使用TCP/IP傳輸協議，將URL中的信息經過HTTP協議發送到百度的服務器。

3.瀏覽器接受遠程服務器響應的數據：遠程服務器（百度的服務器）通常會返回給瀏覽器一個HTML（字節碼數據）。瀏覽器接受到數據以後就對這些字節碼數據以指定的編碼格式進行解碼。瀏覽器獲取編碼格式的途徑：

1）用戶設置，在瀏覽器中能夠指定頁面編碼

2）HTTP 協議中

3）HTML頁面中<meta> 的 charset 屬性值

4.瀏覽器對HTML頁面進行渲染和佈局：

1).瀏覽器開始載入html代碼，發現＜head＞標籤內有一個＜link＞標籤引用外部CSS文件；

2).瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件；

3).瀏覽器繼續載入html中＜body＞部分的代碼，而且CSS文件已經拿到手了，能夠開始渲染頁面了；

4).瀏覽器在代碼中發現一個＜img＞標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼；

服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排布，所以瀏覽器須要回過頭來從新渲染這部分代碼；

5).瀏覽器發現了一個包含一行Javascript代碼的＜script＞標籤，趕快運行它；

6).Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=」none」）。杯具啊，忽然就少了這麼一個元素，瀏覽器不得不從新渲染這部分代碼；

7).終於等到了＜/html＞的到來，瀏覽器淚流滿面……

8).等等，還沒完，用戶點了一下界面中的「換膚」按鈕，Javascript讓瀏覽器換了一下＜link＞標籤的CSS路徑；

9).瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。

注：win10打開host文件的方法：在運行（win+R）中輸入：C:\Windows\System32\drivers\etc便可

2.2  JavaScript引擎

2.2.1 JavaScript引擎是什麼？

「JavaScript引擎」一般被稱做一種 虛擬機。「虛擬機」是指軟件驅動的給定的計算機系統的模擬器。有不少類型的虛擬機，它們根據本身在多大程度上精確地模擬或代替真實的物理機器來分類。

2.2.2 JavaScript引擎是幹什麼的？

JavaScript的基本工做就是將開發者寫的JavaScript代碼轉換成能被瀏覽器理解甚至能在應用程序上運用的最優化的快捷代碼。比方說，當你寫了 var a = 1 + 1; 這樣一段代碼，JavaScript引擎作的事情就是看懂（解析）你這段代碼，而且將a的值變爲2。

2.2.3 主要的JavaScript引擎有哪些？

WebKit的JavaScriptCore 和 Google 的 V8 引擎。

2.2.4 JavaScriptCore和V8引擎解析源代碼的過程

JavaScriptCore 執行 一系列步驟 來解釋和優化腳本：

1）首先它進行詞法分析，就是將源代碼分解成一系列具備明確含義的符號或字符串。

2) 而後用語法分析器分析這些符號，將其構建成語法樹。

3）接着四個 JIT（Just-In-Time）進程開始參與進來，分析和執行解析器所生成的字節碼。

簡單來講，JavaScript 引擎會加載你的源代碼，把它分解成字符串（又叫作分詞），再 把這些字符串轉換 成編譯器能夠理解的字節碼，而後執行這些字節碼。

Google 的 V8 引擎 是用 C++ 編寫的，它也可以編譯並執行 JavaScript 源代碼、處理內存分配和垃圾回收。它被設計成由兩個編譯器組成，能夠把源碼直接編譯成機器碼：

1) Full-codegen：輸出未優化代碼的快速編譯器

2) Crankshaft: 輸出執行效率高、優化過的代碼的慢速編譯器

若是 Crankshaft 肯定須要優化的代碼是由 Full-codegen 生成的未優化代碼，它就會取代 Full-codegen，這個過程叫作「crankshafting」。

一旦編譯過程當中產生了機器代碼，引擎就會向瀏覽器暴露全部的數據類型、操做符、對象、在 ECMA 標準中指定的函數、或任何運行時須要使用的東西，NativeScript 就是如此。

---

 

3.Chrome瀏覽器的開發者工具面板介紹

3.1 Chrome瀏覽器開發者工具的打開方式：

1）功能鍵F12或者Ctrl+Shift+j或者Ctrl+Shift+j打開；

2）打開瀏覽器右上角用戶設置下拉菜單，選擇更多工具，再選擇開發者工具便可打開開發者工具。

3.2 開發者工具的工具欄中經常使用面板介紹

Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面獲得反饋。

Console:記錄開發者開發過程當中的日誌信息，且能夠做爲與JS進行交互的命令行Shell。

Sources: Sources功能面板是資源面板,他主要分爲四個部分,四個部分並非獨立的,他們互相關聯,互動共同實現一個重要的功能:監控js在執行期的活動。簡單來講就是斷點啦。

Network:從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），能夠根據這個進行網絡性能優化。

Timeline:記錄並分析在網站的生命週期內所發生的各種事件，以此能夠提升網頁的運行時間的性能。

Profiles:若是你須要Timeline所能提供的更多信息時，能夠嘗試一下Profiles,好比記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。

Application:記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。

Security:判斷當前網頁是否安全。

Audits:對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的CSS文件等。

3.2.1 元素（Element）面板

Element面板打開方式:

1) 打開開發者工具後選擇開發者工具面板中的Element頁籤;

2) 打開瀏覽器以後,鼠標右鍵檢查 (火狐瀏覽器是」 審查元素」)

Element面板的經常使用功能:

1) 實時編輯DOM節點

在Element面板的DOM樹視圖中.呈現出了當前頁面中的全部的DOM節點.鼠標雙擊任何DOM節點均可以修改其中的屬性值,修改完成以後按回車鍵瀏覽器會當即顯示出修改後的效果.

注意:這種及時的修改只是臨時的修改,只能作調試用,實際應用中每每是調試結束後再將正確的屬性值在本地代碼中修改.

2) 實時編輯CSS樣式

在Element面板中也能夠對當前頁面的DOM元素的樣式進行實時的修改,修改後元素的樣式當即生效.

實時修改某一DOM元素的樣式的操做步驟:

首先選中這個DOM元素.若是沒有打開開發者工具,能夠在要修改的DOM元素上右鍵-->審查元素,而後選擇控制面板右側的Style便可看到當前DOM元素的全部CSS樣式,雙擊其中的CSS屬性值就能夠修改,修改後立刻生效.若是已經打開了開發者工具,能夠經過先點擊開發者工具面板最左側的放大鏡,而後再去點擊頁面上要修改的DOM元素選中這個要調試的DOM元素.此時控制面板右側的Style中就呈現出了當前選中的DOM元素的CSS屬性雙擊屬性值便可修改.

注意:這種及時的修改只是臨時的修改,只能作調試用,實際應用中每每是調試結束後再將正確的屬性值在本地代碼中修改.

3)打開盒子模型,調試邊框參數

點擊右側的Computed頁籤能夠看到當前選中的元素的盒子模型參數,全部的值都是能夠修改的.點擊不一樣的位置(top,bottom,left,right)就能夠修改元素的padding,border,margin屬性值.也能夠經過修改盒子模型中間的數據改變元素的width和height.修改的時候瀏覽器中的當前元素會響應地變化,同時在左側Element面板中會自動添加上響應的Stylt屬性值.當頁面上顯示的樣式符合要求以後,便可中止修改,而後將Element中生成的屬性值複製到代碼中,樣式便可永久修改.

3.2.2 控制檯(Console) 面板

1)查看腳本運行過程當中的異常信息;
因爲JavaScript屬於弱語言類型,語法要求不嚴謹.而且JavaScript是解釋型語言,在代碼中輸入中文的標點等錯誤也不會有提示,只有運行結束後纔會拋出異常信息到控制檯.

若是想查看具體的異常信息，直接點擊右邊的異常信息控制檯將會把咱們帶到程序中錯誤出現的具體位置：

2)打印日誌信息;

上邊說到了簡單的調試可使用alert方法將想要看到的信息顯示在彈窗中。可是alert存在弊端：阻斷程序運行，不能顯示對象的細節信息，彈出多個信息時必須點擊肯定才能看到下一個彈窗的信息。這些問題使用console提供的打印日誌的方法能夠完美解決。

Console經常使用的打印日誌的方法有：

A) console.log(「info」)顯示通常的基本日誌信息，當要顯示的基本日誌信息太多時，可使用console.grop()方法將日誌分組;

B) Console.warn(「info」)顯示帶有黃色小圖標的警告信息;

C) Console.error(「info」)顯示帶有紅色小圖標的錯誤信息；

  Console打印日誌的使用場景：

A)在代碼中使用console.log()打印日誌信息：

B)直接在控制檯上使用console.log()打印信息：

C)清除控制檯中信息的方法：

直接在控制檯上輸出console.clear()方法人後回車便可清除控制檯上的信息。還有一種方法是直接點擊控制檯左上方的清除日誌的按鈕清除日誌信息。

3)運行JavaScript腳本

控制檯還有一個神奇的功能就是能夠運行你輸入的JavaScript腳本，這一點很是實用。

實用場景一：快速驗證JavaScript中的方法。

將一個小數按照輸出，要求：只保留兩位小數。經過查JavaScript的API得知Number對象有一個toFixed方法能夠指定小數位的長度，可是又沒有例子，最快的嘗試方法就是在控制檯上驗證：

console.log(new Number("3.1415926").toFixed(2));

實用場景二：控制檯中輸入JavaScript方法時有提示。

  經過document獲取指定id的節點的方法是document.getElementById(「id」)可是由於MyEclipse，Eclipse中在寫JavaScript時可能沒提示，本身寫太痛苦並且還容易寫錯。這時，就能夠在控制檯上經過方法提示來補全這個方法。

如上圖：咱們不須要完整輸入方法名，根據提示使用鍵盤的上，下鍵選擇須要的方法而後回車便可。

D）Console面板中的全局搜索（快捷鍵Ctrl+Shift+F）

打開全局搜索，輸入關鍵字，可以搜索到包含這個關鍵字的全部的文件。

應用場景：剛到一個公司，對公司的業務不熟。登陸頁面有幾千行代碼，我只想找到登陸的那個方法。這時，輸入登陸方法名就能搜索到登陸登陸方法所在的頁面。點擊進去就可以定位到這個方法了。

3.2.3 資源(Source) 面板

Source資源面板中顯示加載當前頁面須要的全部資源。

在Source面板中能夠找到當前瀏覽器加載的頁面，而後對其中的JavaScript腳本進行斷點調試。Chrome開發者工具使用中會具體說明。

3.2.4 網絡(NetWork) 面板

NetWork面板能夠記錄頁面上的網絡請求的詳細信息，從發起網頁請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態，資源信息，大小，所用時間，Request和Response等），能夠根據這個進行網絡性能優化。

1. Controls 控制Network的外觀和功能。
2. Filters 控制Requests Table具體顯示哪些內容。
3. Overview 顯示獲取到資源的時間軸信息。
4. Requests Table 按資源獲取的先後順序顯示全部獲取到的資源信息，點擊資源名能夠查看該資源的詳細信息。
5. Summary 顯示總的請求數、數據傳輸量、加載時間信息。

NetWork面板的Requests Table 包含着HTTP請求和響應的具體信息，是比較經常使用的一塊

• Name 資源名稱，點擊名稱能夠查看資源的詳情狀況，包括Headers、Preview、Response、Cookies、Timing。
• Status HTTP狀態碼。
• Type 請求的資源MIME類型。
• Initiator 標記請求是由哪一個對象或進程發起的（請求源）。
• Parser： 請求由Chrome的HTML解析器時發起的。
• Redirect：請求是由HTTP頁面重定向發起的。
• Script：請求是由Script腳本發起的。
• Other：請求是由其餘進程發起的，好比用戶點擊一個連接跳轉到另外一個頁面或者在地址欄輸入URL地址。
• Size 從服務器下載的文件和請求的資源大小。若是是從緩存中取得的資源則該列會顯示(from cache)
• Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
• Timeline 顯示全部網絡請求的可視化瀑布流(時間狀態軸)，點擊時間軸，能夠查看該請求的詳細信息，點擊列頭則能夠根據指定的字段能夠排序。

查看具體資源的詳情

經過點擊某個資源的Name能夠查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太同樣，可能包括以下Tab信息：

• Headers 該資源的HTTP頭信息。
• Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
• Response 顯示HTTP的Response信息。
• Cookies 顯示資源HTTP的Request和Response過程當中的Cookies信息。
• Timing 顯示資源在整個請求生命週期過程當中各部分花費的時間。

針對上面4個Tab進行詳細講解一下各個功能：

① 查看資源HTTP頭信息

在Headers標籤裏面能夠看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

預覽響應數據

③ 查看資源HTTP的Response信息

在Response標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容。下圖顯示的是當選擇的資源是CSS格式時的響應內容。

④ 查看資源Cookies信息

若是選擇的資源在Request和Response過程當中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面能夠查看全部的Cookies信息。

---

 

4.Chrome開發者工具之斷點調試

4.1 JavaScript腳本斷點調試

第一步：打開開發者工具，按F12或者在瀏覽器頁面上右鍵選擇檢查。

第二步：在Source面板中找到須要調試的文件。 

第三步：設置斷點。

第四步：觸發調試部分程序的運行，開始調試。

調試過程當中經常使用的按鈕及快捷鍵：

跳到下一個斷點：點擊Sources面板右側的「三角按鈕」 

快捷鍵：F8

        Ctrl+\

跳到下一步（逐步跨方法）：點擊Sources面板右側的第二個按鈕

快捷鍵：F10

 　　　 Ctrl+’

跳進斷點處的方法中：點擊Sources面板右側第三個按鈕

快捷鍵：F11

        Ctrl+;

跳出正在執行的方法：點擊Sources面板右側第四個按鈕

快捷鍵：Shift+F11

  　　  Ctrl+Shift+;

禁用斷點：點擊Sources面板右側的第五個按鈕

暫停在捕獲到的異常處：點擊Sources面板右側的第六個按鈕，而後勾選Pause On Caught Exception

暫停在未捕獲的異常處：點擊Sources右側的第六個按鈕，不勾選Pause On Caught Exception.

查看斷點處，獲取的數據的值：

將鼠標光標停留在變量上面便可，也能夠將變量賦值到Console的控制檯上打印出來。

清除斷點：

在Source面板最右側面板中，找到Breakpoints打開，能夠看到你打的斷點。在斷點列表出右鍵選擇Remove all breakpoints能夠一次性刪除全部斷點。

4.2 XHR斷點調試

右側調試區有一個 XHR Breakpoints，點擊+ 並輸入 URL 包含的字符串便可監聽該 URL 的 Ajax 請求，輸入內容就至關於 URL 的過濾器。若是什麼都不填，那麼就監聽全部 XHR 請求。一旦 XHR 調用觸發時就會在 request.send() 的地方中斷。

4.3 事件監聽斷點

事件監聽是對咱們選定的是事件類型進行監聽，當這個事件觸發的時候，程序就會在這個事件處中止。有助於咱們快速找到某一個元素上綁定的事件。

應用場景：咱們剛接手一個項目時，對業務不熟。想找到提交登陸事件對應的方法，可是發現頁面上登陸按鈕綁定事件寫的不是很明確，並且處理登陸業務的JavaScript腳本文件有幾百行，想找到這個按鈕很不容易。此時，咱們就能夠選定鼠標的點擊事件進行監聽，當咱們點擊登陸按鈕的時候控制檯Sources面板會自動將咱們帶到登陸方法處。

事件監聽斷點使用步驟（以查找天貓首頁登陸方法爲例）：

1.首先打開京東登陸頁面找到登陸按鈕；

2.在登陸按鈕上右鍵屬性==》檢查 打開開發者工具，而後打開Sources面板

3.打開Sources面板右側的Event Listener Breakpoints 找到Mouse及鼠標事件下邊的click而後勾選上。

4. 點擊登陸按鈕，觸發鼠標的點擊事件，發現程序中斷在JavaScript文件中，點擊面板下方的 「{}」 將代碼格式化一下，此時就找到了登陸按鈕觸發的點擊事件了。

此時就能夠一步一步的像下跟，知道跟到天貓的登陸方法了。

---

 

5 其餘設置

5.1 設置開發者工具的位置：

Chrome剛安裝好時，打開開發者工具，開發者工具默認在瀏覽器的左半邊。

能夠經過開發者工具面板右上角的設置開發者工具在瀏覽器中出現的位置。

視圖1：開發者工具以一個獨立的窗口存在；視圖2：在瀏覽器下方顯示；視圖3：在瀏覽器右半邊顯示。

5.2 清除瀏覽器緩存的方法：

瀏覽器緩存（Browser Caching）是爲了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就能夠從本地磁盤顯示文檔，這樣就能夠加速頁面的閱覽。可是，對開發人員來講，咱們修改了JavaScript腳本以後須要當即看到修改的效果，因此須要清除緩存，清除緩存經常使用的方法有：

1.Ctrl + F5

F5一般只是刷新本地緩存；Ctrl+F5能夠把INTERNET臨時文件夾的文件刪除再從新從服務器下載，也就是完全刷新頁面了。

2.開發者工具打開以後，快速清除緩存的方法：

開發者工具打開以後，瀏覽器刷新圖標上右鍵會出現清空緩存並硬性從新加載。這一方法可以在開發者工具打開時快速清理緩存。

3.Ctrl + Shift + Del 快捷鍵清除緩存。

選中地址欄中的URL

按快捷鍵：Ctrl + Shit + Del  會彈出一個清除瀏覽數據的彈窗，選擇要清理的數據項以後，點擊清除瀏覽數據便可。

5.3 禁用頁面的JavaScript腳本；

應用場景：在開發互聯網電商項目時，須要一些商品圖片，因而就去京東找到一個商品打開商品圖片以後，想複製或者將這個圖片另存爲，此時，發現右鍵後什麼都沒有。

緣由是，京東在圖片上經過JavaScript腳本禁用了鼠標右鍵點擊事件。此時，咱們能夠經過禁用當前頁面的JavaScript事件，經過鼠標右鍵保存圖片。

禁用網頁JavaScript事件的方法：

1）開發者工具==》Settings

2）勾選Debugger下的Disable JavaScript 複選框。