mrmrs / pesticide

Kill your css layout bugs

Pesticide

Kill your CSS layout bugs. Without 2000 clicks in Chrome Dev Tools.

WTF is this?

Sometimes if I am trying to sleuth a layout problem in CSS, all I want is every single element on the page to show me where its outline is. And I want all the outline colors to be different per element because, well sometimes I need to tell stuff apart. The pesticide toggle has proved much faster for me than clicking around in browser dev tools when trying to uncover what CSS is causing me problems.

Getting started

If you like pre-processing your CSS like I do, you can drop any of the Sass, Less, or Stylus partials into your includes. Each version of Pesticide sets a pair of debug variables at the top of the partial, which you can set to false if you want to turn off outlines and depths (i.e., shadows) respectively:

// sass
$pesticide-debug-outline: false;
$pesticide-debug-depth: false;

// less
@pesticide-debug-outline: false;
@pesticide-debug-depth: false;

// stylus
pesticide-debug-outline = false
@pesticide-debug-depth = false

If you like to use vanilla CSS, you can either keep it commented out at the bottom of your CSS file, or include it as an extra request in the head of your HTML file like so...

<link rel="stylesheet" href="pesticide.css">

Make sure not to send it to production though because that wouldn't be the best.

Enjoy. And feel free to make the color scheme prettier and send a pull request :)

Development

If you want to tweak the source code you might find it useful to use some of the available gulp tasks included with the project. To set up automation with gulp just press the following keys:

cd pesticide
npm install -g gulp
npm install

Because Pesticide comes in Sass, Less, and Stylus flavors, you can adjust gulp to run with your pre-processor of choice. To do so, simply change the preProcessor variable at the top of the gulpfile to either sass, less or stylus as a string value. For example:

preProcessor = 'sass';

Then run npm start. That will set up:

• Browser-sync (livereload changes in the browser)
• Stylesheet compilation
• CSSLint
• CSS minification

It's important to note that Sass is the default pre-processor set in the gulpfile, so if you plan to use Less or Stylus, you should change the preProcessor value before running gulp.

Generating the color table

The default color table is automatically generated and exported for the different pre-processors we support. To generate the color table simply run:

gulp generate

If you want to generate your own custom color table:

COLOR_TABLE=path/to/custom/table.json gulp generate

Chrome Extension

The source for the Pesticide Chrome extension is included beginning from v0.2. The extension is available in the Chrome Web Store here.

If you make changes to the extension within this repo and want it pushed up to Chrome, report an issue and mention @paulmolluzzo to make sure I get an email about it.

Firefox Add-on

Pesticide is also available as a Firefox Add-on

Author

MRMRS

Contributors

Built and iterated by the following nice people

• Rafael Rinaldi
• Paul Molluzzo
• JC
• Chris Rebert
• François Beaufort
• Zach Reed
• Chris Van
• Jitendra Joshi
• David Hemphill
• kirkas
• mrmrs

License

The MIT License (MIT)

Copyright (c) 2014 @mrmrs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

pesticide's Issues

Feature request: Short cut hot key toggle extension

Hi, thank you for developing such an amazing dev tool.

I'm wondering if there a chance to add a short cut hot key for enabling the extensions?

The text "you're hovering on..." doesn't appear when doing device emulation

In Chrome, when you browse to a site, press F12 and enable the device emulation, the shortcut "ctrl + hover" doesn't say "you're hovering on..."

Make into chrome extension

It would be nice if you could toggle the appearance of outlines with a chrome plugin.

Support the new FireFox

Right now it says the following:

This add-on is not compatible with your version of Firefox.

Make into safari extension

Allow for users to toggle appearance of outlines on all elements via safari extension.

Holding Ctrl button doesn't display anything

This extension saved so much of my time that I don't have to find the exact Id or class in CSS file. I used to work with this a lot but now this doesn't work.
Holding Ctrl doesn't display anything. It just shows the grids but nothing else :(

Make types of elements more configurable

Would be nice if you could toggle individual sets of elements (secitioning, text-level etc.)

Add link to css hosted on a CDN to project page

toggle pesticide is to working

After the giving all permission I cant able to use it like developers

Option to stay Turned On after page reloads

It would be very convenient to add an option to stay active even after the page reloads. :)

Similar idea to this :)

I also have the same concept about a year ago, only you run it manually in your console. It's a small javascript snippet code and I use box-shadow instead of outline. here http://codepen.io/co0kie/pen/wazBGx . Your chrome extension is very helpful for us devs. :)

Outline pseudo elements

Currently, pseudo elements aren't outlined even though they might be relevant for layout bugs.

Add bookmarklet to project page

The bookmarklet should be on http://pesticide.io so people can just drag it to their bookmark bar from the main page.

port to less and stylus as well

Why does pesticide makes everything white when hovering? can it be disabled?

When hovering over the page.. everthing gets white.. so the most normal colors of the site are turned white.. which feels strange and its harder to debug..

is there a way to disable this?

Thanks

firefox extension link broken

The link in description to the Firefox extension is broken. Please provide the working link. Thanks.

Add hotkey to activate/deactivate the extension

Add a setting to be enabled by default

Great extension.

It would be nice if a global setting could enable it by default on refresh. Because when you work using responsive web design, you refresh a lot, and currently you have to re-enable pesticide after a refresh.

Thanks

Remove the displayed text at the bootom

Hi Team! I love to use pesticide but I having some issues trying to see the footer when I try to apply mobile responsiveness.
Please kindly remove it or make it an optional feature that you can easily manage.

Happy codding!

Is it possible to preserve Pesticide activation on hot reloading?

When I develop and make changes to the code, the web application hot reloads (refreshes) and thus if I had Pesticide active, after refresh it would no longer be active and I would have to activate it again.

Is it possible to somehow preserve Pesticide activation with refreshing (hot reloading)?

Results box hides content

The results box – div with id pesticide-for-chrome-result – overlays on top of the site content. This makes it impossible to debug things that are in that part of the window.

• Is there a way to temporarily hide it?
• Would you be open to a PR which makes the box draggle? That way you can move it around the window if it's obscuring some content of interest.

new permissions google chrome extension permissions

@paulmolluzzo The chrome store version of this now want's new permissions.

it is complaining about "read and change your data on wwww.googleapis.com" Is this just google being overly protective, or was there actually an update to the extension that needs new permissions? I see this repo hasn't been updated in quite a few years, which makes the request for new permissions kinda suspicious.

thanks

Safari extension no more available

Just like the title say
Wanted to download the Safari extension, seem like link broken/removed from Safari extensions market.
Can you post the extension directly on the github repo ?

Thanks

add bower support

Please add bower support.

Sometimes the ctrl's display is still behind and covered up by the elements

I've used this alot and it's great and simple. But sometimes the display that pops up while holding ctrl and hovering still appears behind elements on the screen and is thus covered up and unusable. I'm noticing this right now on a wordpress site I'm making. I don't know if it's the z-index or something else with the styling. It happens rarely, but it does happen. Right now an image gallery's container from a plugin on my wordpress site covers it up (foogallery is the plugin if you need to know).

Change text of tweet button on project page for http://pesticide.io

Change text of "Tweet this" button to just "Tweet" on the gh-pages branch

@amirahaile - want to take a stab at this? Let me know if you have any questions.

Gulp, Build Processes, Housekeeping

Adam,

I'm wondering if you're interested in moving away from gulp to npm scripts and having the js cleaned up? there's a lot going on in this repo and i'm wondering if we could consolidate, make it more useful for postcss and clean up together. Are you up for a pairing session?

Charles

Do something fancy with descendent selectors

Chrome extension: activate via shortcut

It would be awesome if there was a shortcut to (de)activate the extension in Chrome.

Sometimes I want to toggle between off and on to check changes.

Uncaught TypeError

pesticide.js:3 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at init (chrome-extension://bblbgcheenepgnnajgfpiicnbbdmmooh/pesticide.js:3:26)
    at chrome-extension://bblbgcheenepgnnajgfpiicnbbdmmooh/pesticide.js:32:1

I don't have any repro steps unfortunately :(

Request: Opera Extension

Hi. I love the Pesticide Chrome extension, but I often use Opera browser and miss Pesticide there. Any plans to make an Opera extension?

Add URL to repo description.

Add pesticide.io URL to the repo description. Perhaps to the README as well.

pesticide.css is not valid CSS

Or am I missing something?

https://github.com/mrmrs/pesticide/blob/ac7058c5b354fdf1e0b87b91172b7264dccdf751/css/pesticide.css

make work in iframes

iFrames do still exist here and there and it would be cool if Pesticide worked there too.

How to quit?

fixed

Optimize Sass code

I feel that the Sass code can be massively optimized by using the Sass maps that were introduced in version 3.3.

For example,
We can create a map that has selector as the key and the corresponding value as the Hex color.

$pesticide-map: (body: #2980b9, article: #3498db, nav: #0088c3, aside: #33a0ce);

And, then run a loop on this map to compute the final CSS.

@each $selector, $color in $pesticide-map {
    #{$selector} { outline: 1px solid #{$color} !important; }
}

This will produce the following output CSS,

body { outline: 1px solid #2980b9 !important; }
article { outline: 1px solid #3498db !important; }
nav { outline: 1px solid #0088c3 !important; }
aside { outline: 1px solid #33a0ce !important; }

This data structure will make the code much shorter/compact and would be very easy to maintain or add new elements in the code.

Any thoughts?

pesticide has been removed from chrome store?

if so, how can I install it on my chrome browser?

Add box shadow option to illustrate depth / z-index

Different versions for css and sass?

Hi,

I see css version and sass version read different version numbers (i.e., v1.3.0 and v0.1.0).

Is there any reason why those are different please?

Thanks.

pesticide.io was hacked?

I'm getting redirected to spam when I visit pesticide.io now.

Allow Disable Shadows in Chrome Extension

The getting started says you can disaable shadows with

// sass
$pesticide-debug-outline: false;
$pesticide-debug-depth: false;

so i think it might be a good idea to add these as options to the chrome extension, since i'd like to disable those sometimes when im working on projects.

NOICE COMPUTER DUDE

Hail Hydra

Forcing visibility

I was debugging horizontal overflow and eventually found out it was caused by an invisible element, so pesiticide wasn't really helpful there.
Is this something it should be doing? Did you already consider forcing visibility?
Perhaps in an aggro-mode?

This helped in my specific case:

*, *:before, *:after {
    outline: solid 1px red;
    opacity: 1 !important;
    visibility: visible !important;
}

Not working w/ Local Files

Watching a web developing course where the instructor is using Pesticide on a local file and it's working, while I'm doing to same and it's working on everything BUT local files.

I don't think I'm the only one facing this as others have also reported the issue.

Firefox 57+

This extensions is now marked as Legacy and will not run in the latest Firefox Developer edition. Can you please upgrade this to work in Firefox 57+?