Outlinr: a bookmarklet

6/Dic/2011 144

Outlinr: simple y rápido web inspector, ni menos ni más / simple and fast web inspector, neither more nor less

Selecciona tu idioma / Select your language:


Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as I can visually locate where the elements are positioned, if they’re collapsing, which elements are involving, etc. I use outline because it’s a property that does not modify the box model and won’t going to break more elements that are already working fine. If I use border instead, it will add 1 or 2 px to the box and can add more unnecessary problems. In addition, I use the red color not only because it’s strongly visible, but it’s fastest writing on the keyboard (lazy huh?).

Anyway, that was the introduction. I made this bookmarklet that does the job for me directly on the browser, so I don’t add dirt to my stylesheet or to the HTML file. I could use the web inspector from the browser (or Firebug) but this method is quicker. The bookmarklet asks you for which selector to draw (div is by default but it could be any selector from jQuery sentences) and the color (red is the default but it can be blue, green, #f60, etc).

I hope it can be useful for somebody else than me.

Requirement: you have to be connected to the Internet, it calls jQuery from Google API’s.


Frecuentemente en mi etapa de debugging (cuando necesito solucionar algo dentro del marcado HTML/CSS que estuviera provocando algún conflicto) utilizo la propiedad CSS outline para contornar los elementos HTML y ver dónde están ubicados, si están colapsando, qué elementos envuelve, etc. Utilizo outline porque es una propiedad que no influye en el modelo de caja y no va a hacer que se quiebren los elementos que ya sé que están correctamente posicionados. Si utilizara border le agregaría mínimo 1 ó 2 pixeles a la caja y seguro provocaría un problema más del que estoy tratando de resolver. Además, utilizo el color rojo no porque es uno de los colores más fuertes y menos comunes dentro de un layout, sino que es el más rápido de escribir (en inglés) dentro del CSS. Me acostumbré.

Enfin, esa fue la introducción. Hice un bookmarklet que hace ese trabajo por mí directo en el browser, sin tener que ensuciar mi hoja de estilos y menos el HTML. Podría utilizar el web inspector del browserFirebug) pero este método es más rápido. El bookmarklet te pregunta qué selectores dibujar (por defecto es div pero puedes utilizar cualquier selector mediante las sentencias de jQuery) y además del color (por defecto es red pero puedes utilizar blue, green, #f60, etc).

Espero pueda ser útil a alguien más que a mí.

Requisito: tienes que estar conectado a Internet ya que llama a jQuery desde Google API’s.


Outlinr ← click&drag


How to install a bookmarklet / Cómo instalar un bookmarklet

Uso de Bookmarklets


  1. Onmsjs [#]

    cheap clomid online – clomid online 100mg clomid online

  2. Hmqsfm [#]

    clomiphene tablets – clomid cost clomiphene for sale

  3. Rqcnhd [#]

    viagra 500mg – viagra professional online price of 50mg viagra

  4. Lmtqfi [#]

    viagra pill price in mexico – sildenafil nz price viagra 100 mg price canada

  5. Fardjy [#]

    cost cialis 5mg – cialis pro buy cheap cialis discount online

  6. Sywbag [#]

    where can you buy cialis online – best cialis can you buy cialis in canada

  7. lazy keto diet plan [#]

    keto vegetarian diet https://ketorecipesnew.com/

  8. Rwcuow [#]

    ivermectin 9mg – stromectol cvs buy stromectol

  9. Ryfkro [#]

    ivermectin for covid – stromectol tablets for humans ivermectin 4000 mcg

  10. KevinWet [#]

    best asian gay dating site
    joe lozano gay dating
    dating guy who might be gay

  11. Rdweqe [#]

    casino online usa – online casino real money best online casino for money

  12. gay dating toronto [#]

    gay fisting dating https://gaydatingzz.com/

  13. most successful gay dating site [#]

    review gay bear dating https://freegaychatnew.com/

  14. Xnhtit [#]

    real casino online – hollywood casino casino world

  15. best gay girl dating sites [#]

    free gay dating site bayarea https://gaychatus.com/

  16. gay chat [#]

    gay chubby chasers dating site https://gaychatgay.com/

  17. Tquztn [#]

    over the counter ed pills that work – gnc ed pills online ed pills

  18. Waecme [#]

    where to buy ed pills – latest treatment for erectile dysfunction shark tank ed pill

  19. Aulweq [#]

    prednisone 250 – no prescription prednisone canadian pharmacy prednisone 10mg tablets

  20. KevinWet [#]

    gay guy dating a bi guy
    best gay dating site iphone
    free gay dating in cincinnati

  21. Ciyvwu [#]

    sildenafil tablets 100mg india – viagra 100mg cost can i buy sildenafil over the counter in uk

  22. Iycpzf [#]

    viagra 50mg price – viagra online using paypal viagra online shop

  23. Garrett [#]

    What i do not realize is actually how you are now not really much more well-liked than you may be now.
    You’re very intelligent. You already know thus considerably with regards to
    this subject, produced me individually believe it from numerous numerous angles.
    Its like men and women aren’t involved except it is something to do with
    Lady gaga! Your own stuffs great. Always maintain it up!

  24. your web hosting [#]

    excellent points altogether, you simply won a emblem new reader.
    What might you suggest in regards to your publish that you made a few days ago?

    Any certain?

  25. t.co [#]

    I’m really enjoying the theme/design of your web site.
    Do you ever run into any web browser compatibility problems?
    A couple of my blog readers have complained about
    my site not operating correctly in Explorer but looks great in Safari.
    Do you have any recommendations to help fix this issue?

  26. bula ivermectina [#]

    ivermektin pille kostnad Outlinr: a bookmarklet | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin on amazon

  27. gay dating j [#]

    gay dating decoded https://gaydatinglosangeles.com/

  28. gay nerdy dating memes [#]

    white for black dating gay https://dating-gaym.com/

  29. ivermectin1.com [#]

    ivermectine 1% crГЁme gГ©nГ©rique Outlinr: a bookmarklet | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin 3mg

  30. gay dating sims porn [#]

    gay dating in atlanta https://gayonlinedating.net/

  31. app.gumroad.com [#]

    I’m more than happy to discover this web site. I want to to
    thank you for your time for this wonderful read!!
    I definitely loved every little bit of it and I have you book
    marked to see new stuff in your site. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  32. gay dating cites [#]

    gay dating sites 2021 https://datinggayservices.com/

  33. bitly.com [#]

    Wonderful work! That is the kind of information that
    are supposed to be shared across the web. Shame on the search
    engines for not positioning this submit higher! Come on over and talk over with my website .
    Thank you =) cheap flights http://1704milesapart.tumblr.com/ cheap flights

  34. quest bars on [#]

    excellent issues altogether, you just received a logo new reader.

    What might you recommend about your publish that you just made a few days
    ago? Any sure? quest bars http://bitly.com/3C2tkMR quest bars

  35. bit.ly [#]

    Oh my goodness! Amazing article dude! Thank
    you, However I am encountering problems with your RSS. I don’t know
    why I cannot subscribe to it. Is there anybody having the
    same RSS issues? Anybody who knows the solution can you kindly respond?
    Thanks!! ps4 https://bitly.com/3nkdKIi ps4

  36. bitly.com [#]

    Thank you for the good writeup. It if truth
    be told was a enjoyment account it. Glance advanced
    to far brought agreeable from you! However, how can we keep up a
    correspondence? scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  37. HenryUnfiP [#]

    gay texas zoophilia dating
    speed dating philadelphia gay
    gay dating site grinder

  38. www.iherb.com [#]

    I do not know whether it’s just me or if everyone else experiencing problems with your blog.
    It seems like some of the written text in your posts are
    running off the screen. Can someone else please provide feedback and let me know if this is happening to them
    too? This could be a problem with my browser because I’ve
    had this happen before. Thank you quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  39. http://coub.com/stories/962966-scoliosis-surgery [#]

    Just desire to say your article is as astounding. The clearness
    in your put up is just nice and that i can think you’re
    a professional on this subject. Fine with
    your permission allow me to grab your RSS feed to
    keep updated with imminent post. Thanks a million and please carry
    on the rewarding work. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  40. HenryUnfiP [#]

    chsitey the gay dating site
    gay virgin dating
    gay karate teenagers dating

  41. cetirizine sam's [#]

    zyrtec 90 count price – http://allergyd.com

  42. stromectolforte.com [#]

    ivermectina dosis http://stromectolforte.com/# ivermectin for humans for sale ivermectin for humans amazon

  43. side effects for ivermectin [#]

    stromectol https://stromectolforte.com/ cost of ivermectin lotion buy ivermectin 12 mg for humans

  44. GustavoVet [#]

    build my resume for me
    cpm homework help cc2