Upload
alex867
View
1.204
Download
2
Embed Size (px)
Citation preview
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
核心價值
自由。隱私
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
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.