20150417 firefox & developer tools

1.
Firefox & Developertools 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 storelocation 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’> <divid=’noooooooooooo’> <div id=’argo’> ◢▆▅▄▃-崩╰(〒⽫皿〒)╯潰-▃▄▅▆◣ </div> </div> </div> </div>

74.
modify upload reload

75.
no change ! tryagain ...

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 seeis what u get

104.
after CSS / JS

105.
What the fuuuis 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.

20150417 firefox & developer tools

More Related Content

Viewers also liked

20150417 firefox & developer tools