debugging tips in yui 3

148
YUICONF 2009 Luke Smith Debugging in YUI 3 yuilibrary: lsmith github: lsmith twitter: @ls_n Tuesday, January 18, 2011

Upload: luke-smith

Post on 25-Jun-2015

1.942 views

Category:

Technology


2 download

DESCRIPTION

A review of some common pitfalls and how to avoid or discover them. Includes a quick overview of some of the debugging tools available (as of late 2009). Generic web dev content as well as YUI-specific content.

TRANSCRIPT

Page 1: Debugging tips in YUI 3

YUICONF 2009

Luke Smith

Debugging in YUI 3

yuilibrary lsmith

github lsmith

twitter ls_n

Tuesday January 18 2011

YUICONF 2009

Debugging is all about challenging your own assumptions At least one of them was obviously wrongrdquo

-- some bald guy

ldquo

Tuesday January 18 2011

YUICONF 2009

Web development is hard

Tuesday January 18 2011

YUICONF 2009

This is what were up against

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 2: Debugging tips in YUI 3

YUICONF 2009

Debugging is all about challenging your own assumptions At least one of them was obviously wrongrdquo

-- some bald guy

ldquo

Tuesday January 18 2011

YUICONF 2009

Web development is hard

Tuesday January 18 2011

YUICONF 2009

This is what were up against

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 3: Debugging tips in YUI 3

YUICONF 2009

Web development is hard

Tuesday January 18 2011

YUICONF 2009

This is what were up against

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 4: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 5: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 6: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 7: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 8: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 9: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

Tuesday January 18 2011

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 10: Debugging tips in YUI 3

YUICONF 2009

This is what were up against

HTMLTag soup

Quirks mode

Unsupported tags

CSSCascadeSpecificity

Stacking context

Box model

JavaScriptFunction scoping

Late bindingthis

DOMReflows

Event system

Asynchronicity

BrowserImplementations

Security policy

Bugs

LibraryInconsistent API

Version nuances

Bugs

Tuesday January 18 2011

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 11: Debugging tips in YUI 3

YUICONF 2009

Environment

Complexity

Inconsistency

Bugs

Tuesday January 18 2011

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 12: Debugging tips in YUI 3

YUICONF 2009

The actual problem

(understand the problem space)

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 13: Debugging tips in YUI 3

YUICONF 2009

Itrsquos the nature of a library to change the playing field

JS

DOM

HTMLCSS

Browser

Requiredknowledge

Tuesday January 18 2011

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 14: Debugging tips in YUI 3

YUICONF 2009

Itrsquos the nature of a library to change the playing field

Requiredknowledge

JS

DOM

HTML

CSSBrowser Library

Tuesday January 18 2011

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 15: Debugging tips in YUI 3

YUICONF 2009

We try

Consistent API Much improved

Interoperability Still great

Documentation Good but can improve

Bugs Where

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 16: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 17: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Inspectors

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 18: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Inspectors

Console

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 19: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 20: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 21: Debugging tips in YUI 3

YUICONF 2009

What we have to work with

Inspectors

Console

Debuggers

Community

Tuesday January 18 2011

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 22: Debugging tips in YUI 3

YUICONF 2009

Inspector

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 23: Debugging tips in YUI 3

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 24: Debugging tips in YUI 3

YUICONF 2009

Console

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 25: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 26: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 27: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 28: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 29: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 30: Debugging tips in YUI 3

YUICONF 2009

Debugger

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 31: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 32: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 33: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 34: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 35: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 36: Debugging tips in YUI 3

YUICONF 2009

FireBug

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 37: Debugging tips in YUI 3

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 38: Debugging tips in YUI 3

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 39: Debugging tips in YUI 3

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 40: Debugging tips in YUI 3

YUICONF 2009

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 41: Debugging tips in YUI 3

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 42: Debugging tips in YUI 3

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 43: Debugging tips in YUI 3

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 44: Debugging tips in YUI 3

YUICONF 2009

Dragonfly

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 45: Debugging tips in YUI 3

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 46: Debugging tips in YUI 3

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 47: Debugging tips in YUI 3

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 48: Debugging tips in YUI 3

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 49: Debugging tips in YUI 3

YUICONF 2009

IE Developer Tools

Tuesday January 18 2011

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 50: Debugging tips in YUI 3

YUICONF 2009

IE6 and (true) IE7

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 51: Debugging tips in YUI 3

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 52: Debugging tips in YUI 3

YUICONF 2009

MS Visual Web DeveloperExpress Edition

Tuesday January 18 2011

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 53: Debugging tips in YUI 3

YUICONF 2009

IE Developer Toolbar

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 54: Debugging tips in YUI 3

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

Tuesday January 18 2011

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 55: Debugging tips in YUI 3

YUICONF 2009

Firefox

Safari

Opera

IE8

IE7

IE6

Developer tools

FireBug

Web Inspector

Dragonfly

Developer Tools

MS Vis Web Dev + Dev Toolbar

MS Vis Web Dev + Dev Toolbar

Tuesday January 18 2011

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 56: Debugging tips in YUI 3

YUICONF 2009

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 57: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 58: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 59: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 60: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 61: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 62: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 63: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Step 1 Verify its in the DOM

Step 2 Hover the element for highlight

Step 3 Check for missingoverridden styles

Step 4 Check the CSS of its ancestors

Step 5 Disable styles position zoom

Step 6 Reduce

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 64: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

display none

visibility hidden

overflow hidden

z-index x

position relative

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 65: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 66: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 67: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 68: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 69: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 70: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 71: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 72: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 73: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 74: Debugging tips in YUI 3

YUICONF 2009

Inspector

Problem [something] isnt showing up

Tuesday January 18 2011

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 75: Debugging tips in YUI 3

YUICONF 2009

Inspectors

- Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 76: Debugging tips in YUI 3

YUICONF 2009

console

NO YESalert()

consolelog()

Ylog()

Tuesday January 18 2011

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 77: Debugging tips in YUI 3

YUICONF 2009

console

NO YES

Ylog()alert()

consolelog()

Tuesday January 18 2011

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 78: Debugging tips in YUI 3

YUICONF 2009

Ylog( msg category source )

if (this_isImageLoading(img))

Ylog(ldquoThumb image loadingrdquo info slider)

Schedule the sync for when the image loadserrors this_scheduleSync() else

Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)

this_ready(imgthis_isImageLoaded(img))

Tuesday January 18 2011

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 79: Debugging tips in YUI 3

YUICONF 2009

YConsole

new YConsole()render()

Tuesday January 18 2011

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 80: Debugging tips in YUI 3

YUICONF 2009

YConsole

Ylog()

Cross browser

Configurable

Extendable

Pluggable

Tuesday January 18 2011

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 81: Debugging tips in YUI 3

YUICONF 2009

YPluginConsoleFilters

new YConsole() plug(YPluginConsoleFilters) render()

Tuesday January 18 2011

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 82: Debugging tips in YUI 3

YUICONF 2009

Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 83: Debugging tips in YUI 3

YUICONF 2009

YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )

Tuesday January 18 2011

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 84: Debugging tips in YUI 3

YUICONF 2009

YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )

Tuesday January 18 2011

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 85: Debugging tips in YUI 3

YUICONF 2009

Inspectors

Console

- Debuggers

- Community

Tuesday January 18 2011

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 86: Debugging tips in YUI 3

YUICONF 2009

Low hanging fruit

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 87: Debugging tips in YUI 3

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 88: Debugging tips in YUI 3

YUICONF 2009

Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 89: Debugging tips in YUI 3

YUICONF 2009

var obj = foo ldquoFoordquo bar ldquoBarrdquo

Culprit

Tip Trailing commas break IE

ldquoExpected identifier string or numberrdquo

Tuesday January 18 2011

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 90: Debugging tips in YUI 3

YUICONF 2009

Wait for DOMReady

ldquoOperation abortedrdquo

Tuesday January 18 2011

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 91: Debugging tips in YUI 3

YUICONF 2009

ldquoOperation abortedrdquo

Yon(domready function () )

Yon(contentready initFn wrapper)

Yon(available initFn el)

Yon(load function () window)

Yone(body)prepend( newContent )

Tuesday January 18 2011

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 92: Debugging tips in YUI 3

YUICONF 2009

Problem Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 93: Debugging tips in YUI 3

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 94: Debugging tips in YUI 3

YUICONF 2009

Wheres my data

var data

Yio(url on success function (id o) data = oresponseText )

displayData(data)

1

2

3

4

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 95: Debugging tips in YUI 3

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 96: Debugging tips in YUI 3

YUICONF 2009

Wheres my data

Tuesday January 18 2011

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 97: Debugging tips in YUI 3

YUICONF 2009

Wheres my data

Expectation = breakpoint

Console or Net for XHR inspection

Tuesday January 18 2011

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 98: Debugging tips in YUI 3

YUICONF 2009

Problem X is not a function

YUI(config)use(io-base function (Y)

function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )

var data

Yio(url onsuccess callback )

displayData(data)

Tuesday January 18 2011

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 99: Debugging tips in YUI 3

YUICONF 2009

X is not a function

Object does not support this property or method

TypeError Result of expression Yone [undefined] is not a

function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 100: Debugging tips in YUI 3

YUICONF 2009

X is not a function

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 101: Debugging tips in YUI 3

YUICONF 2009

X is not a function

Break on all errors

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 102: Debugging tips in YUI 3

YUICONF 2009

X is not a function

Break on all errors

Documentation

Tuesday January 18 2011

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 103: Debugging tips in YUI 3

YUICONF 2009

X is not a function

Break on all errors

Documentation

Dependency Configurator

Tuesday January 18 2011

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 104: Debugging tips in YUI 3

YUICONF 2009

X is not a function

FireBug

Web Inspector

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 105: Debugging tips in YUI 3

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 106: Debugging tips in YUI 3

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yone(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 107: Debugging tips in YUI 3

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 108: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 109: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 110: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 111: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yone returns null

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 112: Debugging tips in YUI 3

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

Tuesday January 18 2011

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 113: Debugging tips in YUI 3

YUICONF 2009

Problem Selector not working

YUI(config)use(node function (Y)

Yall(divcontains(YUI)) addClass(where-u-at)

selector-css3

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 114: Debugging tips in YUI 3

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 115: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 116: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 117: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

Tuesday January 18 2011

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 118: Debugging tips in YUI 3

YUICONF 2009

Missing module

Symptoms

Run time errors

Yall returns empty NodeList

Cross browser failure

Usual suspects

selector-css3

event-mouseenter

event-focus

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 119: Debugging tips in YUI 3

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 120: Debugging tips in YUI 3

YUICONF 2009

Missing module

Step 1 break the chain

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 121: Debugging tips in YUI 3

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Tuesday January 18 2011

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 122: Debugging tips in YUI 3

YUICONF 2009

Missing module

Step 1 break the chain

Step 2 expectation = breakpoint

Step 3 nodeListsize()

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 123: Debugging tips in YUI 3

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 124: Debugging tips in YUI 3

YUICONF 2009

Missing module

Tuesday January 18 2011

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 125: Debugging tips in YUI 3

YUICONF 2009

X is not a functionand

Missing module

Break on all errors

Expectation = breakpoint

Documentation

Community

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 126: Debugging tips in YUI 3

YUICONF 2009

Problem Cant access Y

YUI(config)use(node function (Y)

implementation

)

Y is not visible here

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 127: Debugging tips in YUI 3

YUICONF 2009

Problem Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 128: Debugging tips in YUI 3

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 129: Debugging tips in YUI 3

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 130: Debugging tips in YUI 3

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 131: Debugging tips in YUI 3

YUICONF 2009

Cant access Y

Step 1 Assign Y to a local variable

Step 2 Combo url = synchronous

Step 3 Undo step 1 and 2

Tuesday January 18 2011

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 132: Debugging tips in YUI 3

YUICONF 2009

Cant access Y

Tuesday January 18 2011

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 133: Debugging tips in YUI 3

YUICONF 2009

Problem Cant access Y

var Y = YUI()use(node function (Y)

implementation

)

Y IS visible here

Tuesday January 18 2011

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 134: Debugging tips in YUI 3

YUICONF 2009

var node = Yone(myform button)

var nodeList = Yall(myform button)

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 135: Debugging tips in YUI 3

YUICONF 2009

domNode = node_node

domNodes = nodeList_nodes

YNodegetDOMNode( node )

YNodeListgetDOMNodes( nodeList )

Problem I want the DOM node

Tuesday January 18 2011

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 136: Debugging tips in YUI 3

YUICONF 2009

Community

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 137: Debugging tips in YUI 3

YUICONF 2009

Community

Help us help you

ydn-javascript

yui3

yuilibrarycomforum

stackoverflowcom

yui

Tuesday January 18 2011

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 138: Debugging tips in YUI 3

YUICONF 2009

Community

Check the Forum archives

Reduce

gist

Tuesday January 18 2011

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 139: Debugging tips in YUI 3

YUICONF 2009

httpgistgithubcom

Tuesday January 18 2011

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 140: Debugging tips in YUI 3

YUICONF 2009

Donrsquot be afraid to RTFS

Tuesday January 18 2011

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 141: Debugging tips in YUI 3

YUICONF 2009

JSLint

Markup validation

YTest

Preventative measures

Tuesday January 18 2011

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 142: Debugging tips in YUI 3

YUICONF 2009

Final note

Tuesday January 18 2011

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 143: Debugging tips in YUI 3

YUICONF 2009

Final note

ADD TESTS

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 144: Debugging tips in YUI 3

YUICONF 2009

Oh and remember

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 145: Debugging tips in YUI 3

YUICONF 2009

Oh and remember

Its your fault

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 146: Debugging tips in YUI 3

YUICONF 2009

Oh and remember

Its your fault

And add tests

Tuesday January 18 2011

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 147: Debugging tips in YUI 3

YUICONF 2009

Oh and remember

Its your fault

And add tests

Seriously

Tuesday January 18 2011

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011

Page 148: Debugging tips in YUI 3

YUICONF 2009

Image credits

httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm

Tuesday January 18 2011