34
THE OTHER DEV TOOLS AKA THERE'S MORE TO (DEV)LIFE THAN CHROME

The Other Dev Tools

Embed Size (px)

DESCRIPTION

Talk given at Modern Web Conf 2014. Discusses browser dev tools outside of Chrome Dev Tools.

Citation preview

Page 1: The Other Dev Tools

THE OTHER DEV TOOLSAKA THERE'S MORE TO (DEV)LIFE THAN CHROME

Page 2: The Other Dev Tools

WHO AM I?Raymond CamdenDeveloper for AdobeBlogging at raymondcamden.comTweeting at @raymondcamdenI screw up a lot.

Page 3: The Other Dev Tools
Page 4: The Other Dev Tools

WHY?

Page 5: The Other Dev Tools

IT'S NOT WORKING...

Page 6: The Other Dev Tools
Page 7: The Other Dev Tools

HTML CIRCA 1995

Page 8: The Other Dev Tools
Page 9: The Other Dev Tools

ONE MORE STORY...

Page 10: The Other Dev Tools
Page 11: The Other Dev Tools

GAME PLANQuick review what Chrome doesCompare similar features in other browsersRun some broken code!

Page 12: The Other Dev Tools

CHROME DEV TOOLSInspect/Modify DOMInspect Network callsDebugging JavaScriptAudits and PerformanceMobile/Responsive emulation, Mobile PlatformStorageExtensions

Page 13: The Other Dev Tools

LEARNING MOREMain Docs: https://developer.chrome.com/devtools/index@chromiumdev

Page 14: The Other Dev Tools

LEARNING MORE?About ChromeRelease notes? / Google+ and html5rocks.com

Example Another Example

Page 15: The Other Dev Tools

WHAT I WANT AS A WEB DEVELOPERClear docs on what has changed (and easy to find docs!)Docs on what changed at the HTML, JS, CSS levelDocs on what changed at the browser level, both in and out ofdev tools

Page 16: The Other Dev Tools
Page 17: The Other Dev Tools

DEMO

Page 18: The Other Dev Tools

TOOLBAR OF AWESOME!

Page 19: The Other Dev Tools

LEARNING MOREMain Docs: https://developer.mozilla.org/en-US/docs/ToolsBonus pro tip: Google for "mdn anythingweb"@firefoxdevtools

Page 20: The Other Dev Tools

LEARNING MORE?About FirefoxRelease notes? Help / What's New, then DeveloperInformationMozilla Hacks (hacks.mozilla.org)

Page 21: The Other Dev Tools
Page 22: The Other Dev Tools
Page 23: The Other Dev Tools

DEMO

Page 24: The Other Dev Tools

LEARNING MOREMain Docs: https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_GuideTwitter: HAHAHAHAHAHAHAHAHA YEAH RIGHT

Page 25: The Other Dev Tools

LEARNING MORE?WWDC?Random cool people on the Internetcaniuse.com

Page 26: The Other Dev Tools
Page 27: The Other Dev Tools

"Internet Explorer - the browser most used todownload other browsers..."

Page 28: The Other Dev Tools

A PLEA

Page 29: The Other Dev Tools

DEMO

Page 30: The Other Dev Tools

LEARNING MOREMain Site:http://msdn.microsoft.com/library/ie/bg182326.aspxAlso: http://msdn.microsoft.com/en-US/ie ( )@iedevchat

ex

Page 31: The Other Dev Tools

LEARNING MORE?IE blog: http://blogs.msdn.com/b/ie/

Page 32: The Other Dev Tools

OTHER TIPSLinting - not just for the OCD!Unit Test - but of course you already are!External network tools (Charles, Service Capture)

Page 33: The Other Dev Tools

OTHER TIPS - MOBILE SPECIFICChrome and Safari for Android and iOSGapDebug - https://www.genuitec.com/products/gapdebug/Weinre - http://people.apache.org/~pmuellr/weinre-docs/latest/

Page 34: The Other Dev Tools

THANK YOU!