Pickle your DOM and CSS and enjoy them outside the confines of your least favorite browser
Pickl'em was born out of a frustration with attempting to do static analysis of webpages in the dynamic environment of a browser. In many ways, this is similar to attempting to solve a jigsaw puzzle with a toddler sitting next to you; it's possible most of the time though error prone and time consuming. Pickl'em allows you to serialize the DOM and associated CSS styling of a webpage in order to quickly get the hell out of the browser and into a more sane environment where you can then perform your actual analysis.
$ yarn add picklembody {
font-family: Helvetica, sans-serif;
}
div {
color: red;
}<body>
<div title="Hi!">Hello world!</div>
</body>import serialize from 'picklem';
serialize(document.querySelector('div'))
Object {
type: 'element',
tag: 'div',
attributes: [
{
name: 'title',
value: 'Hi!'
}
],
style: [
{
name: 'font-family',
value: 'Helvetica, sans-serif'
},
{
name: 'color',
value: 'rgb(255, 0, 0)'
}
],
children: [
{
type: 'text',
value: 'Hello world!'
}
]
}Copyright © 2017 Kasper Kronborg Isager. Licensed under the terms of the MIT license.