debugging tips in yui 3
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/1.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/2.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/3.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/4.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/5.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/6.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/7.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/8.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/9.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/10.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/11.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/12.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/13.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/14.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/15.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/16.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/17.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/18.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/19.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/20.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/21.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/22.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/23.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/24.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/25.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/26.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/27.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/28.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/29.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/30.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/31.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/32.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/33.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/34.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/35.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/36.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/37.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/38.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/39.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/40.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/41.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/42.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/43.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/44.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/45.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/46.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/47.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/48.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/49.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/50.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/51.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/52.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/53.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/54.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/55.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/56.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/57.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/58.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/59.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/60.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/61.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/62.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/63.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/64.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/65.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/66.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/67.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/68.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/69.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/70.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/71.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/72.jpg)
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/73.jpg)
YUICONF 2009
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/74.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/75.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/76.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/77.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/78.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/79.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/80.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/81.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/82.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/83.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/84.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/85.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/86.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/87.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/88.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/89.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/90.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/91.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/92.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/93.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/94.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/95.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/96.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/97.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/98.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/99.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/100.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/101.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/102.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/103.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/104.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/105.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/106.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/107.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/108.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/109.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/110.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/111.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/112.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/113.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/114.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/115.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/116.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/117.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/118.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/119.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/120.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/121.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/122.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/123.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/124.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/125.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/126.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/127.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/128.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/129.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/130.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/131.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/132.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/133.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/134.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/135.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/136.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/137.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/138.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/139.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/140.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/141.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/142.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/143.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/144.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/145.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/146.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/147.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022103001/558bee74d8b42a195c8b45f9/html5/thumbnails/148.jpg)
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011