Firefox Dev Tools for WordPress Developers (WordCamp Iloilo 2019)

1. Firefox Dev
Tools for
WordPress
Developers
Robert “Bob” Reyes
WordCamp Iloilo 2019
25 AUG 2019 | Iloilo City, Philippines
#MozillaPH

2. About Me
• Mozilla Rep for the PHL since 2011
• CTO at ALIAC.edu.ph
• Technopreneur at TurfSitePH.net
• Technology Columnist at MB.com.ph
• Team Manager at SIPFC.org
• @bobreyes in Twitter
• Dad of Xeon & Haswell
• Firefox user since Version 1.0

3. Being a Pinoy Mozillian…

4. What is
Mozilla?

5. #MozillaPH

6. History of Mozilla
On 23 Jan 1998,
Netscape Communications Corp.
created a project called
Mozilla.
Mozilla was launched 31 Mar 1998.

7. The
Mozilla Mission

8. Mozilla’s Mission
To ensure the Internet is a global
public resource, open &
accessible to all.
An Internet that truly puts people
first, where individuals can
shape their own experience &
are empowered,
safe & independent.

9. The
Mozilla Manifesto

10. Mozilla Manifesto
We are committed to an internet
that includes all the peoples of
the earth -- where a person’s
demographic characteristics do
not determine their online
access, opportunities, or quality
of experience.

11. Mozilla Manifesto
We are committed to an internet
that promotes civil discourse,
human dignity, & individual
expression.

12. Mozilla Manifesto
We are committed to an internet
that elevates critical thinking,
reasoned argument, shared
knowledge, & verifiable facts.

13. Mozilla Manifesto
We are committed to an internet
that catalyzes collaboration
among diverse communities
working together for the
common good.

14. What is the
Open Web?

15. Open Web
• Encompasses technical
concepts like:
• Open-Source Code; &
• Open Standards.
• Also encompasses democratic
concepts like Free Expression
& Digital Inclusion.

16. An Open Web is a web by &
for all its users, not select
gatekeepers or
governments.

17. We have a NEW
brand identity…

18. We have a NEW
brand identity…

22. Starting with Firefox 63, all desktop versions of
Firefox include an experimental cookie policy that
blocks cookies & other site data from
third-party tracking resources.

29. Firefox for
Mobile

30. The
SPEED you need
with the
PRIVACY you want
on
ALL your devices.

32. Firefox Monitor
• Find out what hackers already know about you,
& learn how to stay a step ahead of them.

33. Firefox Monitor

34. Firefox Monitor

35. Firefox Dev Tools

36. Firefox Dev Tools
• Let’s you examine, edit, & debug HTML,
CSS, & JavaScript on the desktop & on
mobile.
• The Core Tools:
• Page Inspector
• Web Console
• JavaScript Debugger
• Network Monitor
• Performance Tools
• Responsive Design Mode
• Accessibility Inspector

37. Page Inspector
• View & edit page content & layout.
• Visualize many aspects of the page
including the box model, animations, &
grid layouts.

38. Web Console
• See messages logged by a web page &
interact with the page using JavaScript.

39. JavaScript Debugger
• Stop, step through, examine, & modify the
JavaScript running in a page.

40. Network Monitor
• See the network requests made when a
page is loaded.

41. Performance Tools
• Analyze your site's general
responsiveness, JavaScript, & layout
performance.

42. Responsive Design Mode
• See how your website or app will look &
behave on different devices & network
types.

43. Accessibility Inspector
• Provides a means to access the page's
accessibility tree, allowing you to check
what's missing or otherwise needs
attention.

44. Firefox Dev Tools
• More developer tools built into Firefox:
• Memory
• Storage Inspector
• DOM Property Viewer
• Eyedropper
• Scratchpad
• Style Editor
• Taking Screenshots
• Measure a portion of the page
• Rulers

45. We Need You
Help us improve the
Developer Tools:
https://join.mozillaph.org

46. We Need…
• People to use & test our products.
• People to spread the word about FOSS &
online privacy.
• You to invite us to your events
(school, conference, etc.).
• People to help us man the MozillaPH booth
at different events.
• People willing to learn & to be trained in
helping our people become web literate.
• People to be more awesome online.
https://join.mozillaph.org

47. Photo from #BrazilJS 2016

49. Thank you!
Maraming salamat po!
bob@mozillaph.org