Extending Firefox Developer Tools

Video in TIB AV-Portal: Extending Firefox Developer Tools

Formal Metadata

Extending Firefox Developer Tools
Title of Series
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
The Firefox Developer Tools team has been working hard over the last two years to provide web developers with useful, performant developer tools in Firefox. These tools are now excellent and are receiving a lot of attention from web developers. We have always thought that in addition to being useful and performant they also need to be extensible so that add-on hackers and web developers can create their own customized tools and provide better support for specific web frameworks and technologies. The Firefox Developer Tools team has been working hard over the last two years to provide web developers with useful, performant developer tools in Firefox. The tools are now excellent and recieving a lot of attention from web developers. We have always thought that in addition to being useful and performant, in order to be Firefox they also need to be extensible so that add-on hackers and web developers can create their own customized tools and provide better support for specific web frameworks and technologies. This talk will cover the current apis and techniques used to extend the developer tools, how to get started, where to find help and real-world examples
Computer animation
Computer animation
Building Context awareness Digital electronics Code State of matter Multiplication sign Sheaf (mathematics) Mereology Roundness (object) Atomic number Hypermedia Different (Kate Ryan album) Software framework Endliche Modelltheorie Extension (kinesiology) Logic gate Physical system Software developer Voxel Bit Instance (computer science) Complete metric space Entire function Data management Process (computing) Website Self-organization Summierbarkeit Quicksort Slide rule Open source Link (knot theory) Web browser Student's t-test Template (C++) Product (business) Term (mathematics) Data structure Mathematical optimization Computer architecture Task (computing) Time zone Graph (mathematics) Uniqueness quantification Prisoner's dilemma Projective plane Debugger Cartesian coordinate system Limit (category theory) Axiom Graphical user interface Computer animation Software Web-Designer Video game Iteration Communications protocol
Computer animation
Point (geometry) Functional (mathematics) Computer file Code Patch (Unix) Control flow Web browser Mereology Element (mathematics) Mathematics Different (Kate Ryan album) Atomic number Damping Endliche Modelltheorie Physical system Installation art Software developer Debugger Mathematical analysis Bit Directory service Data management Network topology Normal (geometry) Pattern language Figurate number Local ring
Web page Slide rule Context awareness Server (computing) Functional (mathematics) Code Multiplication sign Decision theory Source code Set (mathematics) Parameter (computer programming) Mereology Code Number Revision control Mathematics Prototype Roundness (object) Hypermedia Hacker (term) Endliche Modelltheorie Extension (kinesiology) Computer architecture Demo (music) Software developer Plastikkarte Bit System call Frame problem Message passing Process (computing) Computer animation Web-Designer Telecommunication Right angle Quicksort
Scripting language World Wide Web Consortium Momentum Multiplication sign System call Web 2.0 Degree (graph theory) Medical imaging Computer animation Web-Designer Internetworking Query language Software framework Extension (kinesiology) Active contour model
Laptop Scripting language Point (geometry) Slide rule Link (knot theory) Multiplication sign Closed set Chemical equation Letterpress printing Planning Function (mathematics) Mereology Bookmark (World Wide Web) Connected space Twitter Web 2.0 Goodness of fit Computer animation Integrated development environment Software framework Endliche Modelltheorie Table (information) Freeware
Computer chess Computer animation
Computer animation
but that good the life of
the the end of the world and
it is not that the the the end
of it but to what it is the this and and
and the the the time here on 2 of and the the and and so as you see we have a lot of people entering the room so again leaves you don't mind please go to the Middle to let people find someplace C is more easy I like to you have it the you you if you of the and from you the the OK so now we're welcoming GeV profuse suggest is walking tho it out as a product manager for 5 of them about tools here is aware bad Music Technology gates has is best served at is best when solving hard problems or integrating all systems using great open source software is special did the done numerous JavaScript's HTML 5 I cab ICT even to driven architecture as and heavy debts or so please welcome death that the I'm trying to remember where she got where that is this you got that was probably like people over to resilience of the anyway I'm just I I wouldn't also seen as a few other people work and voxels in room in residence the with Alex what anyway I'm to talk about making add-ons for the tools and and is the history of this is that the vaccine that was seen worked on on jetpack which is the also that honesty K. and axioms now part of the all tools organization were very excited about getting web developers to make and extend their own web development tools with little children structures pretty cool animated so you so the current state of that working hard this year on me for a much nicer so apologies and I right here on Thursday evening from Vancouver BC which is 9 time zones away some little jet-lagged and if you ever traveled 9 time zones you know the 4 PM is the absolute worst and the anything boring thinking so there's a long offered pauses just as everybody on so I of because the this but this is the old and section mean site was you making all tools rounds like know were making out for develop tools for and then I tweeted this yesterday and the loss of like no no making an adult tools right on students actually more likely to making dev tools for creating their tools out on straight out of the tools that and then that'll hopefully more clear and by the time the current state is uh no we've got an experimental that tools API and is there around for a while I was really great bipolar jails other members the team and Paul acts on the the 1st really good dental that on that I saw which is called gesture terms and reuse gestural before for optimal circuit nice replacement for the consul with completion CoffeeScript support after that I'm so interesting add-ons gesture of course looking Greco was time contributor in the in the house and he made a really useful tool for the team this is where it gets really in session really think of the RTP monitor which allows you to inspect role debugging protocol packages that being devtools uses to around in the features so it's it's for the sting I don't know where it is otherwise and to the other big 1 is actually his the yet there on the 1 that's gotten a little bit of attention lately is is anybody ever use of framework Amber digest and they may use vertebrates it's 1 of those things that we used to make sites on partners angular but of a school so the guys the made under limited Chrome extension forever jails it really interesting thing where they basically admitted as a Member application and then look at around came along in hacked out of Firefox and Alastair port of it in life was an afternoon I think something like that and so we had ever inspector for both Firefox and Chrome will explain that how that cross browser extension works and also tail phrase in a room I think right there and he acting on a really cool project called the my site which allows you to use the dev tools to make modifications to occasion exported as an add-on to the experimental but if you go to also know the links these slides later and there a link in here to the get high recall for that extension and was probably more like about forgetting some but anyway so the existing tools and to get you started and it that are the sum of all prison 1 created out on and who here is like familiar with like media a traditional Sernam's will restartless add-on destructive JS and this happened old school and so Victor pour off by created this great a template is so and get help it's just it's got all the and be stripped of the uniqueness start writing code with that and I've got a basic to watch the news and you just build your out on our from there in was got sort of hints to the dev tools part of it to get you going the usual the want for the UI for tools to watch so there's get every go and in the atomistic day at a jet pack Weaver you know those 2 examples I mentioned and respected hardly monitor and you can use all the rest of the the atomistic a models as well and using that look at ended up trading when he was working in the inspectors stuff was a Grunts task for creating a Firefox add-on so the way that the Chrome extension works will the weather the amber extension works is that it's a user's grunts which is a node j they sort of uh build system essentially for preprocessing things and doing this and doing that you can be used for running any task and so I'm looking at a really nice a grant task that will set up the honesty for you and get it running you don't really have to do anything except when a few commands and any injuries into the rest of the graph build system is used for the and respective project so that when I'm around people working on that project need to build atoms for Firefox and Chrome they're just running some node JS commands on the command line they're not having to worry about 1 browser the other that much so and it's really like is a bit of a complicated project of JS extension is is really interesting project to look at that and the way that they don't so and without a lot of stuff from last year in Firefox and developer tools for Firefox developers and the latest iteration of this we had a and had a process browser debugger and recently we went supports the entire process browser tool what's In this lets you um basically debugging any code is running in Firefox including extensions and from this separate process and all Sampath here do demo that and see if it hopefully works and so it's an interesting what does it actually starts a difference in instance of any of those
warning less refreshing anyway
and this is what it looks like and and as of Sept . thing but anyway of from 1 of
the bugger the please look for me not to us have I think he intermolecular this would you are to
it there the the and the that and and the and if so this is this matter on that but has and but this pattern when you hit the button something supposed to have it isn't you don't want so is effective in tree we would do so this is the code for that ion in a browser to lots and down for example you can just the set a breakpoint there you would work and if you get that code in year in year out on you would stop that great point and you can do things like Inspector local scope and normal step about and you also have a scratch that directly hooked up in the way that the scratch and works debugger is that if you're stuck on a break points and you're in the current scope than the scope of that scratch that and also the consul is is where you're at the barber that's the local scope of the model that can be really useful for the you to try to figure out a weird but and has something to do with the the local scope of of the function here and the can is inspected around arbitrary come from there so it's really quite powerful system it's a bit Heavyweight that actually lose all JavaScript in from the browser so but that's that's kind of what we currently have is actually a lot of people like it trout out on development so but if do
so in the future we wanna make this a little bit better and better bonding simply the body packaging and better at us a better debugging that means that all they actually got like an intern last year he wrote a a bunch of instructor code allows us to have what we call abundance so a bit different than the browser debugger because it only load the the code for your specific out you did click on the button in the add-on manager and you would open a toolbox is only focused on your code figure out on it's very good experience for her but added developers you have to worry about looking at all the JavaScript code that this loaded from for all the browser the so and for working in a thing called we can call it a native jetpacks and the idea is that and alan base atoms are or essentially and in pretty simple and and what we've done in the past we had bolted on a lot of extra stuff around it like install RDF file imposter JS file and a bunch of other weird stuff and certain created in xpi out of it but what we do instead is we're putting making someone changes the atom manager so it'll just directly load a pack add-on without any of that extra stuff what that means is that with the ship as a package of analysis to directory as it follows the patch of the song in it and just as if that up of that directory or parts of the for you but more importantly when you're doing your development you can pointed out a folder with the package of days on end just happened the CodeNet folder and reloaded you don't have to make an extra that follows her rebuild step temporary a thing like that so around element is just a lot more like grown people seem to like that development so we're going to that as well about yeah there is the datum I'm not gonna give the audience system at this point it's like a little tiny bit and and we'll have allowed squeal did that is as a driving announced OK don't really quite know what to do at this point and so is proposal for the the and all the but loaded
and it is knowledge about supports like to from the slides if you really interested should dig into this and this document was written by Eric Goldman Jetpack team members and that we do everything and you have even like our our Change proposals so them and you see the the acronym Jap that's jetpack enhance the proposal we we have this process for making changes the the guys on so that's pretty cool stuff we're really excited about it and landing probably in 30 30 is just starting like next week so lot of time and was the work is done so I'm pretty confident that the Firefox and serving I got so you still
like the uh sort of like I don't even think about data and release anymore I just think about mainly in the world and because a lot of web developers use 90 award that's that's sort of my my shipping version and when I just say numbers like that it's usually a Firefox version number is server that that so the other thing awareness than like a victim media and putting together is better in the eyes to make it really simple to make a tool extension seeking constituted just on their functionality and not have to worry about a lot of the extra stuff certain use jet commandeers models and we make sure that the simple things are simple and here's some examples of what panel would look like as part of a solar radical solace really is the the techniques the Jetpack team he's working on his back and a working prototype as we speak so it's pretty simple and you know that the key part of this is that it's very much like other detected the eyes and that the UID you would put into our own the the frame Senator what's is itional JavaScript and CSS on the the and all the communications sent by post a message the and so in particular if you look at these are called actually we get say you got a message from your your frame in in the the in a devtools pain incomes and your main like that code you get a call back with a you know that source frame as or as an argument you get some data from it you get the origin of it so you can probably do cross message so you know cross pose special stuff and you also get a single target is the really important part when Ukrainian doubtful the body and the whole what's opens and where you're really concerned about this stuff in the page right and so you have your your down there and you wanna do interesting things and pass this is back to the wide but it's all about the pace of developers working on and so the target is a reference of a channel to that page so in the same spot your because the set doing some sort of weird round robin PostMessage a sort of rodeo you have everything you need in that call back to to do what you want you yes so understood the little bit of a demo of Ember Inspector show you what's possible on as in the really interesting thing to point out about Ember Inspector was was made by the amber JST was made by a Firefox add-on hackers lookup ordered it but it didn't taken a lot of time and it's a really smart architecture decisions about this because they wanted an extension and could be maintained and improved by their community not necessarily by our community and and that means the most of the coding is is an emerging as well that I'm not sure about what I mean the so everybody seen this before
goal to do the the so this is the EM extension over here and and so it's instead of you shrink roads and got the data that's being stored this and going do is to say you know thank you but no way so we have 4 times but there is make it as something else like a plot of the for those 2 that's interesting but follow this policy lying here the below the tool bars is that additional at it's been embedded into Firefox impetus the away and this allows the images people to continue to improve their tools as a as a framework community using a technology there used to be a really have to worry about it being a Firefox and work from out on it's a it's a web developer tool maintained by web developers for the web development stuff and I think that's really important things were important for the web not to be beholden to browser vendors to catch up to you because I'm Emery seems cool and English in school that around Web too long enough to to see a lot of cool stuff come along and then get replaced or overridden the these guys that was all that were really begin to tools and script Acula snake is still have like as a kind of a chip on the shoulder Reggie query like Ehrlich so long ago that get over degree 1 but you know that just the other day I happen users this do you really need japery in the article it was really good was a call these things for you but you don't really need them anymore or maybe you can so illegal thing about this is that it's our innate internet often on it shows up these Adams show here I just look like
everything else I think gesture broken down anyway
and 1 of the things you can do is you can sort of link things so I think if I clicked click this is this but and it's pretty broken is totally works like a half hour but is totally just like my my laptop a super delegates anyway the this was the like invoking it shows up here and I think it's I think it's like a little weird 0 by the the size to but I anyway so that's the so
the is a really interesting important I to look at a few thinking why because free favorite web framework that I use many users close script much of other stuff and it's really fancy and I was headed that adult environment for all you can build 1 of those in Firefox and and we're here to help so tell the point and so thanks for listing for a few minutes about this kind of stuff I hope you're more interested in will be hanging out today in and out of all tomorrow maybe the JavaScript remember there's a jabs rooms in region of the i it's model will be here tomorrow yes so the room but I better that's Roland and this is our and start in OK I'm this just a business so that's the super short you're all the slides or you can use it have for the URL are all to read it out in a couple minutes as well and I'm connected standing on on Twitter but this is the far parts the tools I can be sure all and for all the latest devtools goodness and on miocene we have these 2 channels interferences in this stuff you wanna ask questions if you're interested in how the dental themselves work of full and if you're interested more in the on side it like out on and independent so they slide and if there's any questions I think we have time and thank you humans the what and I'm wondering if you guys have any plans of supporting on consul that table which was introduced to kick and allows you to on yeah print tabular data yeah it's pretty cool I think there's no there's an open balance on it I don't think it's a super I think it's blocked by rewriting how we output the consul stuff which is kind of ongoing but it's actually something that we want to be consistent and and be helpful they're so and so please when you're leaving get a be faulted D and then please do it sounds quietly because sometimes people of some difficulty is to lead to hear the questions and the answers you and it this time another question the if you want you don't need to thank around and so it's like some of the things that I think that just the fact that the for the love of knowledge we need to know we and are owed arched
my enough and and and the the the chess hours and
the we
you know that