Firefox & Developer tools

AlexW 2015.04.17

agenda• Free / OpenSource

• extensions ( I )

• advence user

• extensions ( II )

• Developer tool

• Userscript & Front-end

• Q&A

About me

AlexW 開源 自由 宅宅 鄉民 暴民

為什麼我在這裡?

交了壞朋友 摸了git / 學了 python / 換了 Debian

每個人都需要壞朋友 好朋友支持你原本的生活 壞朋友改變你原本的視野

先談談自由與開源*

Back to FireFox

Firefox 是什麼? 能吃嗎 ?

不就瀏覽器？

調查兵團 出動 !

瀏覽器

IE / Chrome / FirefoxSafari / Opera

可以給我理由嗎?

IE 內建

你知道 IE 掰了嗎?

可是公務都要用 IE 欸 就是這樣掰了才覺得爽

IE 回歸正途 所以世界都爆炸了

Chrome 又快又潮

綁 Google 快! 把我綁起來 <3

Firefox 老派宅

先不管 Firefox 你聽過火狐娘嗎?

2008

===自high 分隔線 ===

Firefox

核心價值

http://youtube.com/v/LtOGa5M8AuU

自由。隱私

Tracking cookies mozilla privacy

Do Not Track

Micro$oft default enable DNT

各家優勢

IE : 免安裝 各位的責任

Chrome : 我爸估狗

同步 / 商店 / 常駐

不過我倒覺得是這樣啦吼

以使用者為中心

簡單 強大

Open Source 公開透明。光明磊落

Lv.1 普 user

extensions 附加元件初探

不要廣告 ADblock plus

μBlock (beta) https://github.com/gorhill/uBlock

Tab mix plus https://addons.mozilla.org/zh-tw/firefox/addon/tab-mix-plus/

BBSFox https://addons.mozilla.org/zh-TW/firefox/addon/bbsfox/

新聞小幫手 http://newshelper.g0v.tw/

Lv.2 宅 user

人狐合一

搜尋列 search bar

ctrl + K

分頁群組 Tab Groups

shortcut

google it ! moztw 鍵盤捷徑

搭配滑鼠自定義 滾輪左右偏: 切換分頁

大拇指: 關閉分頁

Trackpad 搭配 BetterTouchTool

阿宅御用瀏覽器 怎麼可能這麼少

官方快捷鍵 日常任務

好用到爆炸 關鍵字搜尋

( 搜尋列 掰~ )

不好⽤用, 免錢!

萬惡 Big5 解決方法

Ctrl-L Ctrl-K

Lv.3 Advance user

extensions again 附加元件威能

refcontrol https://addons.mozilla.org/zh-TW/firefox/addon/refcontrol/

Live HTTP Headers https://addons.mozilla.org/zh-TW/firefox/addon/live-http-headers/

GreaseMonkey* https://addons.mozilla.org/zh-tw/firefox/addon/greasemonkey/

油猴威能 外掛中的外掛

OpenUserJS https://openuserjs.org/

Greasy Fork https://greasyfork.org/

DEMO apple online store location switch

Lv.4 Developer tools

Firefox developer tools

網站排版

Frame Table CSS

<div class=’im_your_father’> <div id=’u_r_my_son’> <div id=’noooooooooooo’> <div id=’argo’> ◢▆▅▄▃-崩╰(〒⽫皿〒)╯潰-▃▄▅▆◣ </div> </div> </div></div>

modify upload reload

no change ! try again ...

extension

Web Developer https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/

Firebug https://addons.mozilla.org/zh-tw/firefox/addon/firebug/

現在內建了

內建開發者工具 Firefox 4+

chrome 也有 聽說IE也有

檢測元素 Inspect Element

DEMO

Real time

截圖

CLI 魂

Developer Edition http://mozilla.com.tw/firefox/developer/

獨立 Profile

Dark mode

太alpha 淚砍

Dark mode 掰~

Lv.5 Developer

淺談 User Script 與前端開發

你用什麼做網頁 ?

FrontPage

你透露出你的年紀了

M$-Word 好吧 我承認我也被逼著用

Dreamweaver ?

你有聽過鄙視鏈嗎? 軟體工程師鄙視鏈

設計師鄙視鏈

Namo? 賣鬧啊~

連鄙視鏈都排不上

Sublime ! 可以留下 email 嗎? 我想請教你

網站越來越難做

before CSS / JS

What u see is what u get

after CSS / JS

What the fuuu is what u get

還有 Responsive Web Design

UI / UX

F2E Front End Engineer

HTML / CSS / JS WYSIWYG

JSbin codepen* jsfiddle

DEMO

Firefox Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

DEMO

GreaseMonkey https://addons.mozilla.org/zh-tw/firefox/addon/greasemonkey/

寫一個 User Script meta-data

OpenUserJS https://openuserjs.org/

Q & A 之前 北投吳先生提到 Firefox 當機問題

flash 疑難排解

Q & A 送貼紙勒~

Thanks.