2010年google浏览器大会分享

6. FireBug

7. FireBug
Opera Dragonfly

8. FireBug
IE Developer Tools
Opera Dragonfly

9. FireBug
IE Developer Tools
Opera Dragonfly

10. FireBug
IE Developer Tools
Opera Dragonfly
Webkit Developer Tools

11. • FF

12. • OP

13. • OP webkit CSS

14. • OP
• http://jsfox.cn/blog/javascript/debug-js-using-break-points-part1.html
• http://jsfox.cn/blog/javascript/debug-js-using-break-points-part2.html

15. • OP
• http://jsfox.cn/blog/javascript/debug-js-using-break-points-part1.html
• http://jsfox.cn/blog/javascript/debug-js-using-break-points-part2.html

16. • OP

17. • OP

18. • Webkit 007
• http://www.google.com/support/chrome/bin/static.py?page=guide.cs&guide=29302&topic=29307
• http://www.google.com/support/chrome/bin/static.py?page=guide.cs&guide=29302&topic=29309

19. • Firebug

20. • Firebug

22. “ ”
•
2004 7 “ ”
• http://www.w3cn.org/article/tips/2004/91.html

23. Hack

24. Hack

30. Boss :“ ”

31. Boss :“ ”
•

32. Boss :“ ”
•
•

33. Boss :“ ”
•
•
• HTTP

34. Boss :“ ”
• HTTP
•
•
• HTTP

35. Boss :“ ”
• HTTP
• Expires Header Cache
•
•
• HTTP

36. Boss :“ ”
• HTTP
• Expires Header Cache
• Etag 304
•
•
• HTTP

37. 2007

38. Boss
• Qzone.qq.com http://qzone.qq.com/
• Google Reader http://www.google.com/reader
• Remember the Milk http://www.rememberthemilk.com/
• Zoho Writer http://writer.zoho.com/
• PassPack http://passpack.com/info/home/
• MindMeister http://www.mindmeister.com/
• Buxfer http://www.buxfer.com/
• Autodesk Labs Project Draw http://draw.labs.autodesk.com/
• Google Docs http://docs.google.com/
• Picasa Web Albums Mobile http://picasaweb.google.com/m

39. • Gears _block
• Gears

40. • Gears _block
• Gears

41. •
• DB
•

42. •
• DB
•

43. •
•
• “ ”

61. iPad
• “ ”
•
•
•
•
• ……

63. 20
1

66. flash SEO
• http://dev.sencha.com/deploy/css3-ads/

67. • http://www.nikesh.me/demo/loading.html

68. • http://www.onextrapixel.com/examples/
html5-css3-website-layout/

69. • http://www.onextrapixel.com/examples/
html5-css3-website-layout/

70. • http://www.onextrapixel.com/examples/
html5-css3-website-layout/

71. • http://www.zurb.com/playground/css3-
polaroids/

72. • http://html5demos.com/file-api

73. • http://html5demos.com/file-api

75. HTML XHTML
1.
2.
3.
4.

76. DOM
• tag
attribute tag
•
HashTable[i] i
Tag

80. HTML Tidy

92. IE7

93. IE7

94. FF SA OP IE8 IE7

95. FF SA OP IE8 IE7

96. FF SA OP IE8 IE7

97. FF SA OP IE8 IE7

99. •
• IE

100. •
• IE
IE

101. Introduction to TIDY
When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a
simple way to fix these mistakes automatically and tidy up sloppy editing into nicely
layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for
doing just that. It also works great on the atrociously hard to read markup
generated by specialized HTML editors and conversion tools, and can help you
identify where you need to pay further attention on making your pages more
accessible to people with disabilities.
Tidy is able to fix up a wide range of problems and to bring to your attention things
that you need to work on yourself. Each item found is listed with the line number
and column so that you can see where the problem lies in your markup. Tidy won't
generate a cleaned up version when there are problems that it can't be sure of how
to handle. These are logged as "errors" rather than "warnings".

102. HTML Tidy
HTML
Dave Raggett HTML
XXX
Tidy
Tidy
“ ” “ ”
http://www.w3.org/People/Raggett/tidy/

103. 1. XHTML 4 HTML5.0
2.
doctype
3.
4. “ ”

104. •
•
•

107. Thanks
Q&A

108. tips
•
•
•