The Other Dev Tools

•

0 likes•1,064 views

Raymond Camden

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

Technology

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

WHO AM I?
Raymond Camden
Developer for Adobe
Bloggingatraymondcamden.com
Tweetingat@raymondcamden
I screw up alot.

GAME PLAN
Quick review whatChrome does
Compare similar features in other browsers
Run some broken code!

CHROME DEV TOOLS
Inspect/ModifyDOM
InspectNetwork calls
DebuggingJavaScript
Audits and Performance
Mobile/Responsive emulation, Mobile Platform
Storage
Extensions

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

LEARNING MORE?
AboutChrome
Release notes? /
Google+ and html5rocks.com
Example Another Example

WHAT I WANT AS A WEB DEVELOPER
Clear docs on whathas changed (and easyto find docs!)
Docs on whatchanged atthe HTML, JS, CSS level
Docs on whatchanged atthe browser level, both in and outof
devtools

LEARNING MORE
Main Docs: https://developer.mozilla.org/en-US/docs/Tools
Bonus pro tip: Google for "mdn anythingweb"
@firefoxdevtools

LEARNING MORE?
AboutFirefox
Release notes?Help /What's New, then Developer
Information
MozillaHacks (hacks.mozilla.org)

LEARNING MORE
Main Docs: https://developer.apple.com/
library/mac/documentation/AppleApplications/
Conceptual/Safari_Developer_Guide
Twitter: HAHAHAHAHAHAHAHAHAYEAHRIGHT

LEARNING MORE?
WWDC?
Random coolpeople on the Internet
caniuse.com

"InternetExplorer - the browser mostused to
download other browsers..."

LEARNING MORE
Main Site:
http://msdn.microsoft.com/library/ie/bg182326.aspx
Also: http://msdn.microsoft.com/en-US/ie ( )
@iedevchat
ex

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

OTHER TIPS
Linting-notjustfor the OCD!
UnitTest-butof course you alreadyare!
Externalnetwork tools (Charles, Service Capture)

OTHER TIPS - MOBILE SPECIFIC
Chrome and Safarifor Android and iOS
GapDebug-https://www.genuitec.com/products/gapdebug/
Weinre -http://people.apache.org/~pmuellr/weinre-
docs/latest/

What's hot

Adding flash animation to a websiteBubblefruit.com

Brad frost: Atomic design (Webdagene 2014)webdagene

React Storybook, Atomic Design, and ITCSSTrevor Pierce

Adobe dreamweaveralya123

Simple Computer Tips - Screen Shots, Passwords, etcHolly Akers

WordPress BasicsDoug Fisher

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)David Wesst

Making friends with the inspector how non developers can harmlessly dig into...Tara Claeys

How to prevent gradual loading of css in WordPressWP HOLD

Wordpress Questions & AnswersNicole Dion

How to create a prezi presentationlechar72

Email Production at scaledisplay block

Ui Testing on Windows PhoneStuart Lodge

Front end for back end developersWojciech Bednarski

WebDU KeynoteTerry Ryan

Design Before Code: Thinking About Accessibility from the Ground UpCaitlin Geier

Moving from Wordpress to JoomlaPete Rossetti

Rapid WordPress Theme DevelopmentJosh Williams

Responsive & Responsible Web Design in DNNgravityworksdd

Meet Windows PowerShellConcentrated Technology

What's hot (20)

Adding flash animation to a website

Brad frost: Atomic design (Webdagene 2014)

React Storybook, Atomic Design, and ITCSS

Adobe dreamweaver

Simple Computer Tips - Screen Shots, Passwords, etc

WordPress Basics

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)

Making friends with the inspector how non developers can harmlessly dig into...

How to prevent gradual loading of css in WordPress

Wordpress Questions & Answers

How to create a prezi presentation

Email Production at scale

Ui Testing on Windows Phone

Front end for back end developers

WebDU Keynote

Design Before Code: Thinking About Accessibility from the Ground Up

Moving from Wordpress to Joomla

Rapid WordPress Theme Development

Responsive & Responsible Web Design in DNN

Meet Windows PowerShell

Viewers also liked

Saving Cane Toadsalex99156

Dr.nanyingi ifvm cc_2012 Nanyingi Mark

Google Reviews as % of total pre and post HotpotMike Blumenthal

Method Statement for Powerflushing Domestic SystemsFernox

BENBROOKChristopherLees

Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Sacha Leprêtre

Eric Weathers 14Eric Weathers

Viewers also liked (7)

Saving Cane Toads

Dr.nanyingi ifvm cc_2012

Google Reviews as % of total pre and post Hotpot

Method Statement for Powerflushing Domestic Systems

BENBROOK

Chrome Dev Summit Summary 2013 part 1 - what’s hot ?

Eric Weathers 14

Similar to The Other Dev Tools

Chrome Developer Tools - Pro Tips & TricksMars Devs

Scraping the web with Laravel, Dusk, Docker, and PHPPaul Redmond

NJECC iWEB Tutorial DAndreaD'Andrea

Intro to mobile web application developmentzonathen

WWX 2013 CocktailRaphael Harmel

Web testing with SeleniumXBOSoft

Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxldominion

Intro to PuppeteerIslam AlZatary

Claim Academy Intro to ProgrammingAlex Pearson

Headless browser a stepping stone towards developing smarter web applicatio...Bala Murugan

Seminar: Become a Reliable Web ProgrammerAchmad Solichin

Cb Resumecb_user

Introduction to CordovaRaymond Camden

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen

A Developer Day 2014 - Durban Robert MacLean

Fundamentals of HTML5St. Petersburg College

Going native with html5 web componentsJames York

The Internet Explained To Your Mum In 5 SlidesMarcello Brivio

Composer at Scale, Release and Dependency ManagementJoe Ferguson

Re-use Your Skills and Code to Expand the Reach of Your Apps with SilverlightFrank La Vigne

Similar to The Other Dev Tools (20)

Chrome Developer Tools - Pro Tips & Tricks

Scraping the web with Laravel, Dusk, Docker, and PHP

NJECC iWEB Tutorial DAndrea

Intro to mobile web application development

WWX 2013 Cocktail

Web testing with Selenium

Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl

Intro to Puppeteer

Claim Academy Intro to Programming

Headless browser a stepping stone towards developing smarter web applicatio...

Seminar: Become a Reliable Web Programmer

Cb Resume

Introduction to Cordova

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...

A Developer Day 2014 - Durban

Fundamentals of HTML5

Going native with html5 web components

The Internet Explained To Your Mum In 5 Slides

Composer at Scale, Release and Dependency Management

Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight

Recently uploaded

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Slack Application Development 101 Slidespraypatel2

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Histor y of HAM Radio presentation slidevu2urc

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Scaling API-first – The story of a global engineering organizationRadu Cotescu

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Recently uploaded (20)

🐬 The future of MySQL is Postgres 🐘

Boost PC performance: How more available memory can improve productivity

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

My Hashitalk Indonesia April 2024 Presentation

Slack Application Development 101 Slides

GenCyber Cyber Security Day Presentation

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024

Histor y of HAM Radio presentation slide

Data Cloud, More than a CDP by Matt Robison

Injustice - Developers Among Us (SciFiDevCon 2024)

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Presentation on how to chat with PDF using ChatGPT code interpreter

Salesforce Community Group Quito, Salesforce 101

Scaling API-first – The story of a global engineering organization

A Domino Admins Adventures (Engage 2024)

The Other Dev Tools

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

2. WHO AM I? Raymond Camden Developer for Adobe Bloggingatraymondcamden.com Tweetingat@raymondcamden I screw up alot.

4. WHY?

5. IT'S NOT WORKING...

7. HTML CIRCA 1995

9. ONE MORE STORY...

10.

11. GAME PLAN Quick review whatChrome does Compare similar features in other browsers Run some broken code!

12. CHROME DEV TOOLS Inspect/ModifyDOM InspectNetwork calls DebuggingJavaScript Audits and Performance Mobile/Responsive emulation, Mobile Platform Storage Extensions

13. LEARNING MORE Main Docs: https://developer.chrome.com/devtools/index @chromiumdev

14. LEARNING MORE? AboutChrome Release notes? / Google+ and html5rocks.com Example Another Example

15. WHAT I WANT AS A WEB DEVELOPER Clear docs on whathas changed (and easyto find docs!) Docs on whatchanged atthe HTML, JS, CSS level Docs on whatchanged atthe browser level, both in and outof devtools

16.

17. DEMO

18. TOOLBAR OF AWESOME!

19. LEARNING MORE Main Docs: https://developer.mozilla.org/en-US/docs/Tools Bonus pro tip: Google for "mdn anythingweb" @firefoxdevtools

20. LEARNING MORE? AboutFirefox Release notes?Help /What's New, then Developer Information MozillaHacks (hacks.mozilla.org)

21.

22.

23. DEMO

24. LEARNING MORE Main Docs: https://developer.apple.com/ library/mac/documentation/AppleApplications/ Conceptual/Safari_Developer_Guide Twitter: HAHAHAHAHAHAHAHAHAYEAHRIGHT

25. LEARNING MORE? WWDC? Random coolpeople on the Internet caniuse.com

26.

27. "InternetExplorer - the browser mostused to download other browsers..."

28. A PLEA

29. DEMO

30. LEARNING MORE Main Site: http://msdn.microsoft.com/library/ie/bg182326.aspx Also: http://msdn.microsoft.com/en-US/ie ( ) @iedevchat ex

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

32. OTHER TIPS Linting-notjustfor the OCD! UnitTest-butof course you alreadyare! Externalnetwork tools (Charles, Service Capture)

33. OTHER TIPS - MOBILE SPECIFIC Chrome and Safarifor Android and iOS GapDebug-https://www.genuitec.com/products/gapdebug/ Weinre -http://people.apache.org/~pmuellr/weinre- docs/latest/

34. THANK YOU!

The Other Dev Tools

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to The Other Dev Tools

Similar to The Other Dev Tools (20)

More from Raymond Camden

More from Raymond Camden (10)

Recently uploaded

Recently uploaded (20)

The Other Dev Tools