HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.
It looks like there's no way to catch this error, so perhaps I'll just check the context before logging and not display cross-domain <iframe> elements.
I really like this. Would be super awesome if it can also check for unclosed HTML tags like missing divs.
The version in bower.json (0.3.0) doesn't match latest tag (0.4.0).
Would be handy for us on CodePen so we can show the error right next to the line that caused it.
Invoking HTMLInspector in the Head, seems to be working fine.
When I place the script tag in the end of the file before the closing </body> tag it doesn't seem to find any the css rules so it gives errors for every class.
If I place the script tag right after opening <body> it doesn't give any errors about missing classes anymore, it just warns that scripts should be placed before closing the body.
What am I missing here?
Thanks
Include a sample of bookmarklet on README?
Like this: https://gist.github.com/hirayama-evolni/5941844
Trace:
$ cat hello.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Hello World</title>
<link rel="stylesheet" href="hello.css" media="all" type="text/css" />
</head>
<body></body>
</html>
$ htmlinspector hello.html
{ '0': { [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' } }
$ htmlinspector --version
0.7.0
'srcset' is not a valid attribute of the element.
Hey, congratulations, HTML Inspector is a great idea.
I'm testing it on a site, but it complains about some classes not being found, like:
The class 'row' is used in the HTML but not found in any stylesheet.
The class 'span4' is used in the HTML but not found in any stylesheet.
My site goes like this:
https://gist.github.com/jaimeiniesta/5943571
I can set up a more detailed example if you need it.
Thanks!
Hello, you guys have a really nice tool there!
What about make a chrome (and firefox, etc) extension to make it usable in any page instantly?
?
Interesting project!
Just inspected a document that has inline <svg> elements..
allowedAttributesForElement(), since the element is not present in elementData. This should probably become a rule violation? I see you got that handled by your <il> example, but for me that also raises the exception.<svg> elements? They are valid HTML5 (non-namespaced), not sure if this is an exception or if there are more elements not listed.Btw, I ran this with html-inspector.js on the docs/styleguide/index.html in & after building topcoat.
I'd be happy to submit a PR, but wanted to check with you first.
It appears that element.attributes returns the attributes in a different order in Firefox than it does in other browsers.
Please explain clearly the following line from "An Example Rule" section in README.md.
var prefix = /data-([a-z]+)/.test(name) && RegExp.$1
Regards,
Manojit Ghosh
Hi,
I have just added the DataTables jquery plugin to my site ( http://www.datatables.net/ ) and now I get several alerts from html-inspector about unused classes, like so:
The class 'DataTables_sort_wrapper' is used in the HTML but not found in any stylesheet.
<div class="DataTables_sort_wrapper">…</div>
But they are defined... I have created a special css file just for these missing classes, containing empty definitions. And some of the alerts did go away, but some didnt, like the one above.
I am guessing the issue is due to the classes being added to the DOM dynamically - but then, the CSS definitions are not being added dynamically.
Any thoughts on why this might be happening?
Thanks,
Chris
PS, just updated to latest html-insp 0.4.1
Hey there, I'm currently experimenting with this tool through webpack but I ran into an issue. It looks like I can't directly require html-inspector in if I get it through NPM. Since it's not uncommon for websites to use NPM exclusively these days for all their modules, I'd like to know if you could make this tool work with NPM as well. As far as I know, it should be as easy as adding a "main" object to the package.json file.
In addition to the require issues, it might also be necessary to properly export the symbols instead of polluting the global namespace. So the result could be as simple as:
require ("html-inspector").inspect();Clone https://github.com/djforth/image-replace.git and run htmlinspector index.html and you'll see the above error.
ReferenceError: Can't find variable: HTMLInspector
I noticed html-inspector (or phantomjs) save cach for html page on domain.
Case:
run htmlinspector http://test.local/index.html
after get 5 warning message
change index.html and run again htmlinspector http://test.local/index.html
after get 5 warning message
I tried to add a new rule, after reading some issues here I figured out that I need to add it in html-inspector.js as well.
HTMLInspector.rules.add( require("./rules/best-practices/inline-event-handlers.js") )
HTMLInspector.rules.add( require("./rules/best-practices/script-placement.js") )
HTMLInspector.rules.add( require("./rules/best-practices/unnecessary-elements.js") )
HTMLInspector.rules.add( require("./rules/best-practices/unused-classes.js") )
HTMLInspector.rules.add( require("./rules/convention/bem-conventions.js") )
HTMLInspector.rules.add( require("./rules/validation/mandatory-classes.js") )
HTMLInspector.rules.add( require("./rules/validation/duplicate-ids.js") )
HTMLInspector.rules.add( require("./rules/validation/unique-elements.js") )
HTMLInspector.rules.add( require("./rules/validation/validate-attributes.js") )
HTMLInspector.rules.add( require("./rules/validation/validate-element-location.js") )
HTMLInspector.rules.add( require("./rules/validation/validate-elements.js") )
window.HTMLInspector = HTMLInspector
},{"./listener":21,"./modules":22,"./modules/css.js":23,"./modules/validation.js":24,"./reporter":25,"./rules":26,"./rules/best-practices/inline-event-handlers.js":27,"./rules/best-practices/script-placement.js":28,"./rules/best-practices/unnecessary-elements.js":29,"./rules/best-practices/unused-classes.js":30,"./rules/convention/bem-conventions.js":31,"./rules/validation/duplicate-ids.js":32,"./rules/validation/unique-elements.js":33,"./rules/validation/validate-attributes.js":34,"./rules/validation/validate-element-location.js":35,"./rules/validation/validate-elements.js":36,"./utils/cross-origin":37,"./rules/validation/mandatory-classes.js":38,"dom-utils/src/get-attributes":1,"dom-utils/src/matches":2,"mout/array/unique":5,"mout/lang/isRegExp":11,"mout/lang/toArray":13,"mout/object/mixIn":18}],21:[function(require,module,exports){
var Callbacks = require("./callbacks")
function Listener() {
this._events = {}
}
my rule is the same as the existing rule, I just copied the same validation rule but changed the name and put it into a new file and added it as above.
but I am not able to get it working.
Please let me know where I am missing something... thanks a lot...
Hi,
Thanks for this - very handy.
Any plans for support for IE? (or tips to make it work with IE.. should I be using modernizr?)
I currently get this error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Mon, 8 Jul 2013 06:45:57 UTC
Message: Object doesn't support this property or method
Line: 1208
Char: 3
Code: 0
URI: http://localhost:8080/js/html-inspector.js
Line 1208 is this:
var elements = Object.keys(elementData).sort()
Thanks, Chris
Hello, I got this TypeError: _rKind.exec(_toString.call(val)) is null @ html-inspector.dev.js:282 with Firefox 14.0.1. And it stops all the javascript process of the page. I don't know from where it comes. What is that bug ?
Just tried to set up the NPM module but looks like there is an issue module.js:
module.js:340
throw err;
^
Error: Cannot find module 'shelljs/global'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/usr/local/share/npm/lib/node_modules/html-inspector/bin/html-inspector:4:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
Third link in FAQ is broken, pointing to:
I guess you changed the link question or else the content body question. Wasn't sure, so I didn't submit a PR.
Explore this. If it turns out to be too much work, kick it out.
One possible way would be to add a property to the main config object that takes a selector. This would allow you to exclude elements and subtrees the same way:
HTMLInspector.inspect({
exclude: "#foo, #bar *"
})If you needed to pass an element instead of a selector (for whatever reason), perhaps something like this would work better:
HTMLInspector.inspect({
exclude: el1,
excludeSubTree: el2
})Haven't dug too deep into this yet, but I noticed everything is logged via console.warn. Would be nice if it were slightly more opinionated, either through the inclusion of .info & .error as well, or style everything with %c & .log.
Gonna take a crack at this, so expect a pull request coming your way. 😏
Amazing tool, by the way. Thanks!
This is a common workaround for a certain Firefox oddity where <button>s remember their disabled state when using the back button and therefore should be ignored.
Please see this gist. Fairly easy to set up (PhantomJS is a dependency for HTML Inspector's own tests already), and fits great in an automated QA and CI workflow etc.
Let me know what you think (the gist works but it's just a starting point), we can discuss it here and I'll be happy to submit a PR.
Functions like parents() are out of scope.
Good advice but better for a static source rather than a DOM checker because a script might have appended something to the <body> (as was the case in my project).
According to the W3C, the action attribute is not required in an "HTML5" document. HTML Inspector is telling me otherwise.
I also put this code into a validator and it did not complain:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form>
</form>
</body>
</html>
Am I missing something?
"The class 'pure-u-1-3' is used in the HTML but not found in any stylesheet."
But the grid works and everything is fine on the page. Loading HTML Inspector 0.8.0 from cdnjs.
Demo https://c9.io/lkraav/html-inspector-pure-css/workspace/hello-world.html
I've noticed two potential bugs, both related (I believe) to the inspector analysing the content of scripts tags. I would have thought scripts should be ignored?
Both examples are taken from a real website, a large retailer.
Throws ReferenceError: Can't find variable: s_c_il. Apparently when analysing the src attribute of a script tag.
Here is the a test snippet taken straight from the site.
<!DOCTYPE html><html lang="en-GB" class=" hasJS desktop hasTouch notIE678">
<head>
<script type="text/javascript" async="async" src="http://dpm.demdex.net/id?d_rtbd=json&d_ver=2&d_orgid=1BB646735278569C0A490D45%40AdobeOrg&d_mid=44962865160045396129049647691892029103&d_cb=s_c_il%5B0%5D._setAudienceManagerFields"></script>
...
</head>
</html>The duplicate-ids rule fires when string id="val" also found in script content.
This is the warning I receive.
[duplicate-ids] The id 'cp' appears more than once in the document.
When I search the content, I find one valid html assignment
<div id="cp">...</div>and one instance assigning a JavaScript object attribute.
cp.id="cp";Btw, great work, this is a great little tool... I just need to work out how to work around these issues.
Hi guys,
I followed the steps below:
Who could help me, please?
It would be great to be able to exclude rules as well. Also, a list of default rules would be handy too.
Basically, make it so the CLI can be customized as much as the main browser app.
This should probably happen through the html-inspector-config.js file which should handle any customization as well as calling inspect(). Only call inspect programmatically if there's no custom config file (currently PhantomJS always calls inspect()).
Also make sure to add automated tests (which don't currently exist).
Thank you for an excellent tool.
I can't seem to get the html-inspector cli to work on my machine. It starts PhantomJS with the following arguments when I execute htmlinspector try.html but is not returning any output.
phantomjs C:\Users\mattjs\AppData\Roaming\npm\node_modules\html-inspector\bin\phantom-runner.js C:\Users\mattjs\AppData\Roaming\npm\node_modules\html-inspector C:\Users\mattjs\AppData\Roaming\npm\node_modules\html-inspector\try.html ""
I had to force quit PhantomJS to exit. Any help on this would be greatly appreciated.
Make sure which phantomjs doesn't return an error code before running htmlinspector from the command line.
See #37 for more info.
What are the chances of an API such that you can give HTMLInspector some HTML in which to inspect and provide feedback on?
The idea being, for a tool like CodePen, you could get some info on the HTML/CSS you have written, but it isn't available in the DOM on the page you are directly on
Is that a major change?
For now just focus on the elements whose rules are cut and dry. Basically, an element in this table whose "children" value doesn't contain an asterisk.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
