
Firefox Network Monitor Reloaded – Part 1 - clouddrover
https://hacks.mozilla.org/2017/06/network-monitor-reloaded/
======
acemarke
Great to see the Firefox Developer Tools team continue to make use of React
and Redux as they rebuild things! They already used React+Redux to rebuild the
Debugger ([https://github.com/devtools-
html/debugger.html](https://github.com/devtools-html/debugger.html) ,
[http://mozilla.github.io/devtools-
docs/react.html](http://mozilla.github.io/devtools-docs/react.html) ), and
clearly it must be working well for them :) Definitely a couple nice examples
of more complex "real-world" apps that go well past the TodoMVC level of
detail. Looks like the source for the Network Monitor is at
[https://github.com/mozilla/gecko-
dev/tree/master/devtools/cl...](https://github.com/mozilla/gecko-
dev/tree/master/devtools/client/netmonitor) .

(Also, will throw out a pointer to my React/Redux links list at
[https://github.com/markerikson/react-redux-
links](https://github.com/markerikson/react-redux-links) if anyone wants
tutorials or info on best practices for using them.)

~~~
cookiecaper
I didn't realize Mozilla was doing this. It breaks my heart. I don't really
know what to think when even browser developers aren't safe from integrating
the JS libs-of-the-moment into their _debuggers_.

At this point, I guess there's nothing left to do but accept our new
JavaScript overlords. I was already forcing myself to accept Node.js and now
it'll have to be that list of 7 other trendy things ("React, Redux, Immutable,
Mocha, Enzyme, Webpack, Yarn").

This is definitely not the computing future I hoped for, but it's the one we
have.

~~~
lucideer
React has been around for 4 years, and - along with Angular - has been a well
known "obvious" choice for building JS UIs for a reasonable period of time. At
least in the "mainstream".

Love for Angular seems to be dwindling slightly, and VueJS is something of a
rising "new kid” on the block here, though both are happening very very slowly
(if at all) and React remains a strong choice.

My point here is, while I definitely bemoan the "JS lib-of-the-moment"
fatigue, I think this largely applies to the millions of ancillary libraries.
The range of major mainstream choices for base frameworks/&c. it's pretty
small, well established, and very comparable to other language communities.

If the objection is to JS the language, that's maybe fair game for the likes
of Electron or Cordova but for an inbuilt integrated tool for debugging JS in
an app with an existing JS runtime it seems the obvious choice, no?

~~~
nxc18
I think that's kind of the point. Angular was not only _the_ choice just a few
years ago, it is still a relatively new technology. It was just as obvious a
few years ago as react is today.

And now? Angular is dwindling out.

~~~
lucideer
I don't know if Angular is really dwindling that much; if so, it's at least
doing so slowly.

Even so, in terms of solid base frameworks, I think the rate of change is both
reasonable, and comparable to other language ecosystems. The first major
generation in the JS world was Mootools/Prototype/jQuery which started with a
lot of churn, settled, and jQuery emerged as somewhat defacto. In between,
we've had a minor mini-generation with a bit of Backbone, Ember and Meteor
stuff happening, before this world of Angular/React/Vue. These are all changes
that I think have taken significant time to come about - they're really not
too​ difficult to follow. The massive daily churn of smaller add-on libs is
more painful but easily avoided tbh.

Similar things have happened elsewhere - PHP's ZF, Symfony, Laravel, ?, Ruby's
Rails, Sinatra, Java's many many complex evolutions, &c. &c.

------
_wmd
On reading the title earlier this morning I thought "great, a few features I
use probably removed but a few cool features I'll grow fond of will get
added", didn't expect to feel so negative after reading the article.

From the list of JS libraries they're using alone, I'm guessing it's going to
get even fatter and laggier than it already was :(

Can anyone give us an overview of lagginess vs the current generation network
tab? I really don't care what's behind the UI (and really, React for this?
Grmbl) or structured search, I just want a listview of requests that appears
in under a second

~~~
sp332
Looks like all the heavy lifting is done by the yarn server. You can see the
new interface in action at the 3:00 mark in the video on this page:
[https://hacks.mozilla.org/2017/06/hacking-on-the-network-
mon...](https://hacks.mozilla.org/2017/06/hacking-on-the-network-monitor-
developer-tool/)

~~~
sp332
^ OK so I was wrong about yarn being a server, but you can see how I got
confused because "yarn start" does start a server in some invisible way.

------
jeroenhd
I'm still missing the insight into websockets that Chrome offers. The network
monitor can see websockets being made, but there is no way to see the data
inside the data frames.

There are of course extensions that fix this but in my experience they are
heavy and slow down the debugger.

I really hope this feature will be added soon (or has been added without me
noticing it)

~~~
codefined
Chrome still isn't perfect for web sockets. They don't even allow you to see
the raw content for binary web sockets and considering how prevalent they are
becoming, this really puts me off using them.

~~~
nitrogen
Seems like the best thing to do would be to add a debugger interface that can
pipe the data into Wireshark, which already has reasonable binary protocol
parsing and display.

------
zb3
What's still missing for me is the ability to intercept requests, like the
great "Edit and resend" but without sending the request in first place.

~~~
ReverseCold
That's basically what I use Charles/Burp for, cool to know that Firefox can do
that in dev tools.

------
sroussey
Nice work Honza!

