Tip:
Highlight text to annotate it
X
在這個影音中,我將介紹一個開發工具,稱為 scratchpad
scratchpad 是一個了不起的工具,可以在直接在運行的網頁編寫程式碼
你能盡情地使用它來做一些不同的事
無論你是否在網頁上工作,或是在 Firfox 上使用
你都能使用 scratchpad
所以第一件事,我們將開啟 scrachpad
先開啟 Firefox 的選單,然後到網頁開發者,然後到 scratchpad
然後開啟 scratchpad 的視窗
現在我們將在網頁中改變,但是不改變 test.html.
在這之前我要給你們看 test.html 的內容是什麼
我到 View Page Source
然後你就能看到這非常的簡單,在這裡它只有 Hello scratchpad!
關閉
現在我要在 scratchpad 打上 document.getElementsByTagName("body")[0].style.background.color = 'red';
現在我可以點擊執行,它將會顯示在目前選擇的標籤上
如果我同時有兩個標籤,然後執行
你可以看到它改變了第一個標籤的背景顏色
但如果再去看第二個標籤,它仍然沒有影響
下一個 scratchpad 能做的事是你到 Execute 點選 Reload and run
那會將你目前寫在 scratchpad 上的內容連接到網頁上
它在頁面重新整理時執行
所以現在點下 reload and run 應該要做相同的事
你可以反白某句話,只讓你反白的那句話執行
假如我打上第二行 alert('hi');
然後我只反白它,在我反白他之前,我先改變背景為藍色
然後我反白 alert('hi'); 然後執行
你可以看到頁面顯示 hi 但是背景顏色仍然是紅色
如果我現在不反白,然後執行
你會看到背景改變成藍色,且頁面顯示出 hi
Scratchpad 也有方便的儲存以及開啟的功能
所以如果將來你有要執行的腳本,你可以輕鬆地執行它
或是不同的設定,你將會設定你的環境
你可以將它儲存成 .js檔案,你可以在下一次打開它
我還想在結束之前介紹 Firfox 開發器中兩個按鈕
是 Inspect 以及 Display
所以"檢查"是,我先反白 'document'
然後點選 Inspect,我們會看到所有 document 裡的內容屬性
然後我可以看這些然後擴增這些內容
Display 將會說明你所反白的,或是顯示它的來源
做一個示範,我反白 document.getElementsByTagName('body') 然後點選 display
它將會顯示 HTMLCollection
OK,現在我將介紹如何運用在 Firefox 開發器上
我現在到這,然後打上 about:config 並前往
點選認證
然後搜尋 devtlools.chrome.enabled 會看到顯示 false
雙擊將它設定成 true
然後回到 scratchpad 沒有多的選單顯示在頁面上
但我關掉並重新開啟,它就會出現了
我關掉它,但不儲存
然後我再重開 scratchpad
shift + F4 開啟他
你就看到 Environment 這個新的選單
然後我點開 Environment 選取 Browser
然後我關掉 about:config 這個頁面
我們再回到示範頁
然後清除整個 scratchpad
然後我將在 chrome UI上做改變
這個就是chrome UI ,這裡沒有任何東西叫 chrome
打上 document.getElementById('urlbar').style.backgroundColor = 'red';
然後執行它,你將會看到它將網址列改變成宏惡
這些就是我要教的