Surface Themes

General Category => How To Web IT Stuff => Topic started by: admin on December 24, 2016, 09:27:37 AM

Title: Web Developer tool bar for Your Browsers
Post by: admin on December 24, 2016, 09:27:37 AM
This is and great tool bar for your web browsers, you can even resize the view for mobile up to PC sizes to check responsive suites and themes.
(http://smf.surfacethemes.com/index.php?action=dlattach;topic=277.0;attach=43;image)
Get it for your browser :

http://chrispederick.com/work/web-developer/ (http://chrispederick.com/work/web-developer/)

maxx
Title: Re: Web Developer for Your Browsers
Post by: Skhilled on December 24, 2016, 05:36:01 PM
Just installed it. Very nice!
Title: Re: Web Developer tool bar for Your Browsers
Post by: Skhilled on December 25, 2016, 12:59:41 PM
Ok, I'm missing something. Using Firebug for FF, you can press F12 and get that web dev. Using that, you can click the little button (that looks like a button and then click an area of the screen and it will show you the CSS for it. See the image below. How can you do that with this?
Title: Re: Web Developer tool bar for Your Browsers
Post by: admin on December 25, 2016, 03:02:56 PM
I have not explored all the tools and features yet but, I think it much, and things that the firebug does not. there are so many thing, will takes some time to go through them all :)
But using both can do it all (possibly)

regards,
Maxx
Title: Re: Web Developer tool bar for Your Browsers
Post by: Skhilled on December 25, 2016, 07:08:41 PM
Yes, it does have a ton of features! I'm very impressed with it. But I really love that feature in Firebug. It takes you right to an object and shows you much of the CSS and HTML associated with it. You can then edit right onscreen and see what your tweaks do without actually breaking anything. :)
Title: Re: Web Developer tool bar for Your Browsers
Post by: admin on December 25, 2016, 07:24:52 PM
If you search the extensions for web developer you can find a few if not more features to add to it, like a toggle to hide the tools bar,  toggle to web console (this will get you the feature you are after) Only it will outline the area in red dots and many other things you toggle the widow size and stuff.

I just added 4 items more to it...I will explore more later. this web dev tools you can bring up the HTML and or CSS and edit it much easier, when making your design  and verify at the click of a button! :)

I had to get use to the fire bug, now I need to get use to all these web dev  tools!
Title: Re: Web Developer tool bar for Your Browsers
Post by: Skhilled on January 06, 2017, 06:26:03 PM
Found it! Click "CSS" then "Display Style Information" OR press ALT + Shift + Y. You'll see a red block surrounding whatever you hover over. Clicking on something will show you the styles associated with it.
Title: Re: Web Developer tool bar for Your Browsers
Post by: admin on January 06, 2017, 06:29:17 PM
I also found it, but forgot to post it..

regards,
Maxx