iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
自我挑戰組

基礎前端+後端網站分享之留言板製作系列 第 4

第四天--F12看網頁程式和Ctrl+F搜尋功能

  • 分享至 

  • xImage
  •  

今天介紹兩個技巧,F12看網頁程式和Ctrl+F搜尋功能。

F12開啟教學

F12看網頁程式
或者按右鍵,點檢查也行。按檢查頁面來源同樣能看到網頁的程式碼。
能用這兩者用來幫助了解網頁的組成。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466khxhMZYws1.png
按F12沒顯示下面畫面的,可能跟我的筆電一樣,需要按Fn+Esc切換成功能鍵模式,才能按F12,而不是快捷鍵模式,會開啟某應用程式。
https://ithelp.ithome.com.tw/upload/images/20230917/201584664feCcbdZLR.png

語言

語言設定上,我已經還原成英文,以英文介面轉中文介面為例子,如圖所示按紅色筆圈的地方
https://ithelp.ithome.com.tw/upload/images/20230917/20158466X2ASQD5dPV.jpg

,到這個畫面,點擊Language這裡,選擇你要的語言。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466cxnGPg0LgH.jpg

再來點擊Reload DevTools,如圖所示,或者直接關掉重開。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466fSHvnlTeJY.jpg

工具欄位置

能把工具欄換位置嗎?當然可以!
點擊如圖紅筆所畫的地方。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466o359WP96Ml.jpg
https://ithelp.ithome.com.tw/upload/images/20230917/20158466DDUtXJKyFO.jpg
就能把工具欄移到右邊。
https://ithelp.ithome.com.tw/upload/images/20230917/201584667W3MYkCBND.jpg

能換到的位置有底部、左邊、右邊以及獨立出來。

檢查網頁

檢查的功能的畫面上,紅筆圈的地方按下去能檢視畫面的某塊的程式。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466NAwYkIE4nT.png
https://ithelp.ithome.com.tw/upload/images/20230917/20158466tQGjNSApkf.png

藍筆圈的功能,能切換裝置,了解不同裝置的排版狀態。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466wuX7gapsHA.png

Ctrl+F搜尋功能

查網頁裡的某個字會很有用的 ,如下圖。
https://ithelp.ithome.com.tw/upload/images/20230917/20158466Aj8Bcm7n1R.png


上一篇
第三天--介紹link和絕對路徑與相對路徑
下一篇
第五天--設定Css
系列文
基礎前端+後端網站分享之留言板製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言