< Return to Video

Firefox開發人員Command Line

  • 0:00 - 0:06
    嗨我想要花一點時間來展示Firefox16的新功能
  • 0:06 - 0:08
    當你看到它時將是beta版
  • 0:08 - 0:11
    它叫做開發者工具列
  • 0:11 - 0:16
    按著Shift-F2開啟，有很多有趣的功能
  • 0:16 - 0:17
    開啟你需要的工具非常簡單
  • 0:17 - 0:23
    它會告訴你哪裡有錯
  • 0:23 - 0:27
    今天我要講的重點是command line
  • 0:27 - 0:31
    但這不是JavaScript的command line，你不能在這裡執行JavaScript
  • 0:31 - 0:35
    這就是讓你下指令來控制你的工具的地方
  • 0:35 - 0:37
    非常適合使用鍵盤
  • 0:37 - 0:40
    以下有一堆不同的命令來控制你的工具
  • 0:40 - 0:44
    像是"dbg"用來控制debugger，"edit"來編輯樣式表
  • 0:44 - 0:49
    讓我來示範"console"指令，每個指令都有它的便利性
  • 0:49 - 0:53
    很多指令有它的小指令，讓你完成多樣化的事務
  • 0:53 - 0:55
    在這裡
  • 0:55 - 1:00
    我開啟網頁控制台，我們可以看到裡面有什麼
  • 1:00 - 1:02
    當然有快捷鍵
  • 1:02 - 1:07
    記得所有快捷鍵不是件容易的事，而且需要活動你的手指
  • 1:07 - 1:11
    但在這裡我有command line有完整的功能，例如"console clear"
  • 1:11 - 1:18
    可以清除控制台，讓我看最新的資料，完成時也能用"console close"來關閉
  • 1:18 - 1:25
    這讓取消一項功能變得容易
  • 1:25 - 1:30
    來看看檢查功能。你通常知道自己的網頁上有什麼
  • 1:30 - 1:35
    我知道這頁有個"#home-news"
  • 1:35 - 1:38
    我知道它的標題是"h3"
  • 1:38 - 1:46
    使用檢查功能與CSS selector可以不用到滑鼠來完成他
  • 1:46 - 1:51
    這裡有另一個設計，我可以知道現在的字體大小是28pixels
  • 1:51 - 1:54
    如果我想知道這在手機上長怎樣
  • 1:54 - 2:01
    輸入"resize to 320 480"
  • 2:01 - 2:04
    這是一種多數手機的大小
  • 2:04 - 2:10
    我們的media query在這裡發揮作用
  • 2:10 - 2:14
    現在字體變成了24pixels
  • 2:14 - 2:19
    這讓我們能夠看看當它是22pixels長怎樣
  • 2:19 - 2:21
    我可以像這樣做
  • 2:21 - 2:28
    這裡有個指令來完成他，或是在這個情況直接輸入"escape"
  • 2:29 - 2:34
    這裡有另一個指令不在我們的開發者工具裡
  • 2:34 - 2:38
    "cookie list"可以列出所有的cookies
  • 2:38 - 2:42
    有趣的是這個指令有許多選項
  • 2:42 - 2:50
    我可以輸入"cookie remove WT_FPC"，或是點一下這裡，就可以產生那條指令
  • 2:52 - 2:57
    這裡有另一項新功能，輸入"inspect h1"
  • 2:57 - 3:00
    我知道這是其中一個標題
  • 3:00 - 3:05
    如果我想要截圖，並傳給其他人
  • 3:05 - 3:09
    可以使用"screenshot"，輸入"heading.png"，我取的名字
  • 3:09 - 3:13
    現在只要按下Enter，它就能截下現在的畫面
  • 3:13 - 3:15
    但在這我要輸入"0"
  • 3:16 - 3:20
    我不想要截下整個畫面，只想要現在這個頁面
  • 3:20 - 3:24
    我輸入"h1"，不想要內文只想要標題
  • 3:24 - 3:27
    我成功完成它並存在下載的資料夾內
  • 3:27 - 3:33
    這裡可以看到，我有個heading.png檔，就是那一頁的標題
  • 3:33 - 3:36
    這是一個很快的螢幕截圖方法
  • 3:36 - 3:41
    讓你不需要麻煩的選取你要的區域
  • 3:42 - 3:47
    這裡有另一條指令"pagemod"
  • 3:47 - 3:54
    藉由command line讓你有一堆不同的頁面操作
  • 3:54 - 3:59
    我來示範最簡單的
  • 3:59 - 4:04
    當我輸入錯時會出現底線來提醒我
  • 4:04 - 4:10
    我想換掉"In the news"，來看看換成"News for you"會怎樣
  • 4:10 - 4:14
    這就是當我輸入"News for you的結果"，一個很簡單的取代
  • 4:14 - 4:20
    你可以試試"page mod remove iframe"，在很多網站上這會很有趣
  • 4:21 - 4:24
    如果你想要進入瀏覽器開發模式，輸入"pref set"
  • 4:24 - 4:30
    你可以設定各種Firefox的隱藏外觀
  • 4:30 - 4:36
    我要來試"pref set devtools.chrome.enabled"，噢我要設成"true"
  • 4:36 - 4:40
    它讓我可以操作瀏覽器
  • 4:40 - 4:42
    接下來這個會在重新啟動之後生效
  • 4:42 - 4:47
    我輸入"restart"，重新開啟瀏覽器
  • 4:52 - 4:59
    好，現在瀏覽器重開了。如果我輸入"Scratchpad"
  • 4:59 - 5:03
    我們可以看見效果。這裡有個"environment"選單，我可以選擇"Browser"
  • 5:03 - 5:09
    這讓我可以執行JavaScript，讓我不只在現在的分頁執行
  • 5:09 - 5:13
    而是整個瀏覽器。意思是我可以撰寫附加元件
  • 5:13 - 5:16
    和"Scratchpad"裡的東西。很酷的功能
  • 5:17 - 5:21
    說到附加元件，有件事值得一提
  • 5:21 - 5:27
    關於整個"Command Line"的想法，是種可延展性的使用者介面
  • 5:27 - 5:31
    你可以撰寫有指令的附加元件，讓我給你一個例子
  • 5:31 - 5:36
    當我輸入"addon enable Firebug"，Firebug是我安裝但未使用的元件，而現在它被啟用了
  • 5:36 - 5:40
    如果輸入"help"，你可以看到現在有個"firebug"的指令
  • 5:40 - 5:43
    那就像我打開firebug一樣
  • 5:44 - 5:48
    如果Firebug是開啟的，我可以輸入"firebug detach"
  • 5:48 - 5:50
    現在它可以輕鬆分出一個獨立的視窗
  • 5:50 - 5:55
    如果我想收回它，就輸入"firebug attach"，而"firebug close"可以關閉
  • 5:55 - 6:00
    這種整合是很棒的
  • 6:00 - 6:04
    希望可以在不久的將來看到許多相關的附加元件
  • 6:04 - 6:05
    感謝你的收看
Title:
Firefox開發人員Command Line
Description:

Firefox用獨特的Command Line讓開發網頁更快更輕鬆。新的工具讓鍵盤更直觀的j控制開發工具的參數
more » « less
Video Language:
English
Duration:
06:06

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.