01之06
在Safari 9中激活並使用自適應設計模式
作為當今世界的Web開發人員意味著支持一大堆設備和平台，有時這可能是一項艱鉅的任務。 即使設計最完善的代碼遵循最新的Web標準，仍然可以發現網站的某些部分可能無法按照您希望他們在某些設備或解決方案中使用的方式進行操作。 面對支持如此廣泛場景的挑戰時，選擇合適的仿真工具是非常寶貴的。
如果你是使用Mac的眾多程序員之一，Safari的開發人員工具集一直都派上用場。 隨著Safari 9的發布，這一功能的廣度已經大大擴展，主要是由於響應式設計模式_，它允許您預覽您的網站在不同的屏幕分辨率以及不同的iPad，iPhone和iPod touch上的呈現方式。
本教程詳細介紹瞭如何激活響應式設計模式以及如何將其用於您的開發需求。
首先，打開你的Safari瀏覽器。
02 06
Safari首選項
點擊位於屏幕頂部的瀏覽器菜單中的Safari 。 出現下拉菜單時，選擇上面示例中圈選的首選項選項 _。
請注意，您可以使用以下鍵盤快捷鍵代替上述菜單項： COMMAND + COMMA（，）
03年06月
顯示開髮菜單
現在應該顯示Safari的首選項對話框，覆蓋您的瀏覽器窗口。 首先，點擊位於窗口右上角的齒輪代表的高級圖標_。
瀏覽器的高級首選項現在應該是可見的。 底部是一個選項，附帶一個複選框，標記為菜單欄中的顯示製作菜單，並在上面的示例中圈出。 點擊一次復選框激活此菜單。
04年6月
進入自適應設計模式
現在，您的Safari菜單中的新選項應該可用，位於屏幕頂部，標記為“ 開發” 。 點擊這個選項。 出現下拉菜單時，請選擇上面示例中圈出的Enter Responsive Design Mode（進入響應設計模式） 。
請注意，您可以使用以下鍵盤快捷鍵代替上述菜單項： OPTION + COMMAND + R
05年06月
響應式設計模式
現在應該以響應式設計模式顯示活動網頁，如上例所示。 通過選擇列出的iOS設備之一（如iPhone 6）或其中一種可用的指定屏幕分辨率（如800 x 600），您可以立即查看該頁面在該設備上的顯示效果或顯示分辨率。
除了顯示的設備和分辨率之外，您還可以通過單擊分辨率圖標正上方的下拉菜單來指示Safari模擬不同的用戶代理 - 例如來自不同瀏覽器的用戶代理 - 。
06年06月
開髮菜單：其他選項
除了響應式設計模式外，Safari 9的Develop菜單還提供了許多其他有用的選項_下面列出了一些有用的選項。
- 打開頁面：允許您在當前安裝在Mac上的任何其他瀏覽器中打開活動網頁。
- 用戶代理：更改用戶代理會導致Web服務器將您的瀏覽器標識為Safari 9以外的其他瀏覽器。
- Connect Web Inspector： Safari 9的Web Inspector顯示Web頁面的所有資源，提供細讀CSS信息，DOM度量和結構以及本機源代碼的能力。
- 顯示錯誤控制台： “開發”菜單中使用最廣泛的選項之一，此控制台顯示JavaScript，HTML和XML錯誤和警告。
- 顯示頁面源代碼：允許您查看和搜索活動網頁的源代碼。
- 顯示頁面資源：選擇此選項可顯示當前頁面中的文檔，腳本，CSS和其他資源。
- 顯示片段編輯器：提供編輯和執行代碼片段的能力，而不是完整的頁面。 從測試的角度來看，這個功能非常有用。
- 顯示擴展生成器：允許您通過相應地打包代碼並添加元數據來構建自己的Safari擴展。
- 開始時間線錄製：記錄WebKit檢查器中可查看的所有項目的數量，包括網絡請求，JavaScript執行，頁面呈現以及用戶定義的period_的其他事件。
- 清空緩存：單擊此選項將刪除Safari中的所有存儲緩存，而不僅僅是標準網站緩存文件。
- 禁用高速緩存：禁用高速緩存時，每次訪問請求時都會從網站下載資源，而不是使用本地高速緩存。
- 允許來自智能搜索字段的JavaScript：出於安全原因，默認情況下禁用JavaScript ，此功能允許您在Safari的地址欄中輸入包含javascript的 URL。
- 將SHA-1證書視為不安全：安全散列算法的縮寫，SHA-1散列函數已被證明不如最初認為的那麼安全，因此在Safari 9中增加了此選項。
相關閱讀
如果您發現本教程有用，請務必查看我們的其他Safari 9演練。
- 如何管理網站推送通知
- 如何將網頁導出為PDF文件
- 如何配置Safari 9擴展以自動更新
- 如何使用固定站點功能