Idea: Dev Tools as model for Web Lit Tools?

David Bruant bruant.d at
Thu Dec 19 05:25:23 PST 2013

Le 18/12/2013 19:19, David Humphrey a écrit :
> Idea: "As Dev Tools is to a web developer, Web Lit Tools could be to a 
> literate web user/maker."
> Consider the Navigation section of the Web Lit Standard: 
> <,> in which 
> URLs and hyperlinks are discussed.  What if I want to understand the 
> URLs and hyperlinks in a page I'm looking at?  We don't provide simple 
> tools for you to just get a list of them all, or to examine them as a 
> curious tinkerer.  You might be interested in how many go to a 
> particular domain, or in how they are constructed, or navigating to 
> content above you in a relative path.
> Consider the Building section: 
> <>, in which we 
> talk about being able to Identify and use HTML tags. View Source is 
> great, but overwhelming if you're not an expert. What about a tool 
> that showed you all the HTML tags in use on the current page, and 
> offered docs to explain what they are? What about pretty-printing the 
> HTML so you can make better sense of it?
It looks a lot like what the "inspector" tab does today (minus doc for 
specific elements)

> In both cases I'm describing tools built into the browser that let you 
> explore and ask questions of the pages you visit--any page vs. just an 
> exercise with a built-in script.  These aren't necessarily editing 
> tools, but rather lenses through which I can observe the web and how 
> it's built.
As far as I'm concerned this paragraph is exactly what I expect from 
"regular" devtools. At occasions, I like to tweak the CSS a little 
(disable some rules, change some values) to see what happens in the 
page, but that's pretty much the furthest my editing goes. Karl Dubost 
(@karlpro) call people who do that "page sculptors".

Sometimes, I use the devtools only to remove ad overlays. People around 
think I'm doing magic, but it's only right click+"remove node" which I 
believe should be doable by most people.
A friend of mine changes his user agent string in Chrome devtools to 
pretend being on iPad and avoid in-content ads in a video player (ads 
are only in the Flash version, so not on iPad). Also something that 
isn't that hard to do (though admittedly requires some knowledge about 
flash VS "HTML5 video").

I feel the tools to explore and play around web pages are already in 
existence. Maybe what they need is to be made more beginner friendly. 
Currently, devtools are assumed to be for people who are experts and 
contain no in-tool tutorial (there is doc on MDN, but beginners opening 
the devtools obviously don't think of it). Some say that Google Devrel 
is spending a lot of efforts in talks and video to explain how Chrome 
Devtools work just because they are poorly designed for beginners. I 
don't know if that's the only reason, but this thought is interesting.

I was at the DotJS conference a couple of weeks ago and Pamela Fox gave 
a talk on teaching JavaScript (the video isn't online yet unfortunately) 
and she mentioned that even how the console works puzzled newcomers at 
first: if you type "var a = 1;", the console answers in Chrome and 
Firefox "undefined" which is not something can naturally expect.

My point is that there may not be a need for new tools but just to lower 
the barrier of existing tools. In my opinion, "regular" devtools could 
use a lot of help in becoming more beginner-friendly.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the Webmaker-dev mailing list