firefox & developer tools

1. Firefox & Developer tools
AlexW
2015.04.17

2. agenda
• Free / OpenSource
• extensions ( I )
• advence user
• extensions ( II )
• Developer tool
• Userscript & Front-end
• Q&A

3. About me

4. AlexW開源 自由 宅宅 鄉民 暴民

5. 為什麼我在這裡?

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

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

8. 先談談自由與開源*

9. Back to FireFox

10. Firefox 是什麼?
能吃嗎 ?

11. 不就瀏覽器？

12. 調查兵團
出動 !

13. 瀏覽器
IE / Chrome / Firefox
Safari / Opera

14. 可以給我理由嗎?

15. IE
內建

16. 你知道 IE 掰了嗎?

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

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

19. Chrome
又快又潮

20. 綁 Google
快! 把我綁起來 <3

21. Firefox
老派宅

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

24. ===自high 分隔線 ===

25. Firefox

26. 核心價值

28. 自由。隱私

29. Tracking cookies
mozilla privacy

30. Do Not Track

31. Micro$oft
default enable DNT

32. 各家優勢

33. IE : 免安裝
各位的責任

34. Chrome : 我爸估狗

35. 同步 / 商店 / 常駐

36. 不過我倒覺得是這樣啦吼

37. 以使用者為中心

38. 簡單 強大

39. Open Source
公開透明。光明磊落

40. Lv.1 普 user

41. extensions
附加元件初探

42. 不要廣告
ADblock plus

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

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

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

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

47. Lv.2 宅 user

48. 人狐合一

49. 搜尋列
search bar
ctrl + K

50. 分頁群組
Tab Groups

51. shortcut

52. google it !
moztw 鍵盤捷徑

53. 搭配滑鼠自定義
滾輪左右偏: 切換分頁
大拇指: 關閉分頁

54. Trackpad 搭配
BetterTouchTool

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

56. 官方快捷鍵
日常任務

57. 好用到爆炸
關鍵字搜尋
( 搜尋列 掰~ )
不
好
⽤用
, 免
錢
!

58. 萬惡 Big5
解決方法

59. Ctrl-L
Ctrl-K

60. Lv.3 Advance user

61. extensions again
附加元件威能

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

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

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

65. 油猴威能
外掛中的外掛

66. OpenUserJS
https://openuserjs.org/

67. Greasy Fork
https://greasyfork.org/

68. DEMO
apple online store location switch

69. Lv.4 Developer tools

70. Firefox
developer tools

71. 網站排版

72. Frame
Table
CSS

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

74. modify
upload
reload

75. no change !
try again ...

76. extension

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

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

79. 現在內建了

80. 內建開發者工具
Firefox 4+
chrome 也有
聽說IE也有

81. 檢測元素
Inspect Element

82. DEMO

83. Real time

84. 截圖

85. CLI 魂

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

87. 獨立 Profile

88. Dark mode

89. 太alpha
淚砍
Dark mode 掰~

90. Lv.5 Developer

91. 淺談 User Script 與前端開發

92. 你用什麼做網頁 ?

93. FrontPage

94. 你透露出你的年紀了

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

96. Dreamweaver ?

97. 你有聽過鄙視鏈嗎?
軟體工程師鄙視鏈
設計師鄙視鏈

98. Namo?
賣鬧啊~
連鄙視鏈都排不上

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

100. 網站越來越難做

102. before
CSS / JS

103. What u see is what u get

104. after
CSS / JS

105. What the fuuu is what u get

106. 還有
Responsive Web Design

107. UI / UX

108. F2EFront End Engineer

109. HTML / CSS / JS
WYSIWYG

110. JSbin
codepen*
jsfiddle

111. DEMO

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

113. DEMO

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

115. 寫一個 User Script
meta-data

116. OpenUserJS
https://openuserjs.org/

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

118. flash
疑難排解

119. Q & A
送貼紙勒~

120. Thanks.