※※※如想從電腦觀看手機網頁版的公司網頁※※※
先按下F12之後
→按視窗左上方的手機按鈕
→再將網址singlepage重新更改為singlemobile
即可查看唷!!
---------------------------我是分隔線-----------------------------------
這個工具相當方便，不但在開發時能夠讓CSS快速完成，並且能夠即刻查看效果
1.選取某區塊、段落
當我們要開始使用之前，當然要先選到要修改的地方，不需要再一直從開發者工具去打開層疊樹找指定區塊。
所以，我們先把滑鼠移到某區塊上面，並點選「檢查元素」：
這樣一來開發者工具就會自動固定到該區塊，然後看到下圖的右邊，出現了可以修改的樣式！
2.CSS 調較樣式、新增樣式功能
用他來開發 CSS 樣式真的非常快。
承上一節，我們看到右方的樣式部分：
3.自動完成功能
此外開發者工具也很貼心的有自動完成的功能，只要輸入字頭，就會自動跳出自動完成的字了，這時候只要按下TAB鍵就可以自動完成拼字了。
取消樣式
當然，也可以把不需要用到的樣式，或不要用的樣式讓他不生效，很簡單，在屬性的左邊有一個打勾勾的地方，把他勾掉就不會套用該行樣式。
新增樣式
新增樣式的方法也很簡單，只要在旁邊的空白處按一下左鍵，就會出現新增屬性的框框了。
把自動完成發揮到極致，如下圖，選擇border，按下Enter，再按下TAB輸入值即可。
然後就可以整個把他輸入完囉，最後再按一下Enter就可以完成編輯。
4.HTML 新增、刪除、更名元素
Google當然也有想到這一點，所以在開發者工具裡面也可以把元素做一些調整，如刪除、新增和修改。
而要做這一些步驟，只要在開發者工具左方的元素上按下右鍵即可。
這邊可以做很多項調整，像是可以刪除該元素，如上圖。
如果你想要改class屬性的值，就在那上面快點兩下，就會變成編輯的狀態，就能修改。
5.偵錯功能
當然，開發者工具一定要有偵錯功能才稱的上是開發者工具嘛，要看目前的網頁有沒有錯誤，就點一下Console標籤即可。
!!!!務必記得!!!!
請注意，在這個開發者工具內做的所有動作都是暫時的，所以當你使用開發者工具修改了某元素之後，請務必也將原始檔案做更改的動作，才會生效。否則重新整理之後還是會恢復原來的樣子。
沒有留言:
張貼留言