Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 25 2013

08:30

Mandatory for Web Developers: Free Video Tutorials on Chrome DevTools by Code School


  
codeschool-devtools-01-w550

Are there web developers who have never heard of Chrome DevTools? I don't know of one single example. Chrome DevTools are a developer's friend. Directly implemented into the browser, they deliver tools that are inescapable when it comes to web programming, especially the debugging part of it. Getting started with DevTools is not exactly complicated, but - as always - any help in accomplishing a faster start is greatly appreciated and lowers the inhibition threshold for newcomers. It is exactly such an entrance (and more) that the free video tutorial "Explore and Master Chrome DevTools" offers you.

April 15 2010

05:22

WebKit Inspector Improves Again: Timeline, Audits and Dedicated Console

Pavel Feldman has introduced some great improvements to the WebKit inspector.

There are some great new panels available:

Timeline Panel

The Timeline Panel provides you with a detailed view of what’s happening inside your browser as you surf. It allows you to zoom into the areas of interest, expand the nested records and investigate their details. The Timeline organizes nesting based on event causation. So, if a mouse down event handler sets a timer, which upon firing loads a resource using XHR, which later evaluates the result when the resource becomes available; then all the events caused by the mouse down will be placed under the mouse down umbrella. Solid parts of the bars show synchronous time spent on the operation, while the semi-transparent part shows the time consumed by everything this event caused (not necessarily synchronously).

Audits Panel

Audit results provide you with hints on unused resources, caching optimizations, the number of resources to load per domain, image tag parameters and many other suggestions. We’d like to make the audits framework extensible so that everyone can contribute checks for various categories such as mobile browsing, security, and static code analysis.

Dedicated Console Panel

You can now enjoy a large and powerful inspector console in a dedicated panel. Note that you can use panel switching shortcuts such as Command-[ and Command-] as mentioned in one of the previous posts.

To go along with these great new panels, there are also a ton of improvement to the other views that you know and love. My favorite is that you can now finally “Edit as HTML” in the DOM inspector. No more node ugliness.

Read the full post for all of the goodness.

Sponsored post
feedback2020-admin
14:56

March 25 2010

07:53

FireSass: Debug in a Sass-y way

Nathan Weizenbaum got fed up debugging Sass, and scratched his itch with FireSass, a Firebug extension for Sass (the "Syntactically Awesome Stylesheets" DSL that makes CSS more fun).

WIth the extension you will see the filename and line number of the .sass file rather than the generated CSS file.... Much nicer!

February 23 2010

11:57

jsFiddle: a Web playground

jsfiddle

Piotr Zalewa has created a really great playground, jsFiddle, for testing sample code and playing with the Web. With an area for the holy trinity of the Web (HTML, CSS, JS) and an output region, you can get right to hacking.

It goes beyond this though. You can also add resources, an Ajax echo backend, and auto load from a slew of JavaScript frameworks.

You can also check out the examples and see great stuff such as Processing in action.

And the finishing touch, share and embed.

Piotr wrote all of this using CodeMirror and MooTools. Nice! Having worked on Bespin, and developed a playground like this (looking forward to show a new mobile one soon!) I appreciate the work!

January 20 2010

11:49

Firebug 1.5: New Features and ready for Firefox 3.6

Nice work Firebug team for announcing Firebug 1.5, a great release that fixes many bugs and adds great features:

  • Mike Radcliffe’s Inspector. A key feature, now solid as a rock,
  • Jan ‘Honza’ Odvarko’s expanded and refined Net panel, with accurate timings,
  • Steve Roussey’s reworking of HTML editing and entity support,
  • Kevin Decker’s CSS and Style side panel improvements,
  • Support for dynamic, graphical breakpoints through out Firebug.
  • Tested support for the soon-to-be-released Firefox 3.6

This is a big deal. The release is out *before* Firefox 3.6. No more “oh man we have a new Firefox but it doesn’t work with Firebug argh”. Awesome.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...