Safari開啟檢視原始碼與網頁開者工具

梅問題-Safari開啟檢視原始碼與網頁開者工具
  雖然現在有不少朋友,都習慣使用Chrome瀏覽器,但身旁不少使用蘋果的朋友,還是習慣使用內建的Safari瀏覽器,說真的梅干也很久沒用Safari了,而那天有朋友來找梅干討論網頁問題時,當梅干要檢視網頁原始碼時,才發現到怎麼找不到,甚至連網頁開發者工具也沒有,讓梅干感到相當的納悶,該不會是被拿掉了吧!因此花了點時間找了一下,終於被梅干給找到了,原來是預設被關閉,因此習慣使用Safari的朋友,也趕快來看看,怎麼開啟檢視原始碼,與網頁開發者人員工具吧!

Step1
點左上Safari,再選擇偏號設定
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step2
切到進階面板,將下方的選項勾起來,這時上方的功能選單中,就會看到開發選項。
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step3
點開發選項後,就會看到檢視網頁原始碼外,還有開發者人員工具,以及回應設計模式。
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step4
除了可以從開發選項中開啟外,也可對著頁面按滑鼠右鍵,一樣也會看到顯示網頁原始碼的選項。
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step5
當開啟顯示網頁原始碼後,則會顯示在畫面下方。
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step6
其實原始碼則是與網頁開發工具整合在一起,當切回元件後,就能像chrome一樣,找到所需的區塊,進行CSS樣式的設定或檢視。
梅問題-Safari開啟檢視原始碼與網頁開者工具
Step7
除此之外Safari也有RWD響應式網頁,版面的切換模擬畫面,因此使用蘋果的朋友,若找到不檢視網頁原始碼的,也趕快試試看囉!
梅問題-Safari開啟檢視原始碼與網頁開者工具

相關文章

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

「Parallels Tools」實現Widnows與MAC OS無縫的相互存取檔案與操作

「Parallels Tools」實現Widnows與MAC OS無縫的相互存取檔案與操作

「Photolemur」具有A.I.人工智慧的照片優化軟體,搶先免費下載試用

「Photolemur」具有A.I.人工智慧的照片優化軟體,搶先免費下載試用

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「AppTrap」將MAC要移除軟體拖到垃圾桶,就自動移除並清除軟體所殘餘檔案

「AppTrap」將MAC要移除軟體拖到垃圾桶,就自動移除並清除軟體所殘餘檔案





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    Alan 說道:

    謝謝你的分享~

  • 第1梅
    Jean 說道:

    請問Step7裡的RWD版面的切換模擬畫面從哪裡開?

    回應:
    當開啟檢示原始碼功能後,在網頁開發者工具就可開啟