Debugging tips in YUI 3

Debugging in YUI 3

Luke Smith
yuilibrary: lsmith
github: lsmith
twitter: @ls_n

YUICONF 2009

Tuesday, January 18, 2011

“Debugging is all about
challenging your own
assumptions. At least one of
them was obviously wrong.”
-- some bald guy

YUICONF 2009


Web development is hard

YUICONF 2009


This is what we're up against

YUICONF 2009


HTML
Tag soup
Quirks mode
Unsupported tags

YUICONF 2009


HTML CSS
Tag soup Cascade/Speciﬁcity
Quirks mode Stacking context
Unsupported tags Box model

YUICONF 2009


HTML CSS JavaScript
Tag soup Cascade/Speciﬁcity Function scoping
Quirks mode Stacking context Late binding
Unsupported tags Box model this

YUICONF 2009


HTML CSS JavaScript

DOM
Reﬂows
Event system
Asynchronicity

YUICONF 2009


HTML CSS JavaScript

DOM Browser
Reﬂows Implementations
Event system Security policy
Asynchronicity Bugs

YUICONF 2009


HTML CSS JavaScript

DOM Browser Library
Reﬂows Implementations Inconsistent API
Event system Security policy Version nuances
Asynchronicity Bugs Bugs

YUICONF 2009


Environment

‣ Complexity
‣ Inconsistency
‣ Bugs

YUICONF 2009


The actual problem

(understand the problem space)

YUICONF 2009


It’s the nature of a library to
change the playing field

CSS
Required HTML

knowledge

DOM Browser

JS

YUICONF 2009


It’s the nature of a library to
change the playing field

Required Browser Library
knowledge CSS

HTML

DOM

JS

YUICONF 2009


We try
Consistent API Much improved

Interoperability Still great

Documentation Good, but can improve

Bugs Where?!

YUICONF 2009


What we have to work with

YUICONF 2009



‣ Inspectors

YUICONF 2009



‣ Inspectors
‣ Console

YUICONF 2009



‣ Inspectors
‣ Console
‣ Debuggers

YUICONF 2009



‣ Inspectors
‣ Console
‣ Debuggers
‣ Community

YUICONF 2009


Inspector

YUICONF 2009


Console

YUICONF 2009


Debugger

YUICONF 2009


FireBug

YUICONF 2009


Web Inspector

YUICONF 2009


Dragonfly

YUICONF 2009


IE Developer Tools

YUICONF 2009


IE6 and (true) IE7?

YUICONF 2009


MS Visual Web Developer
Express Edition

YUICONF 2009


IE Developer Toolbar

YUICONF 2009


Developer tools
Firefox

Safari

Opera

IE8

IE7

IE6

YUICONF 2009


Developer tools
Firefox ➡ FireBug
Safari ➡ Web Inspector
Opera ➡ Dragonfly
IE8 ➡ Developer Tools
IE7 ➡ MS Vis. Web Dev + Dev Toolbar
IE6 ➡ MS Vis. Web Dev + Dev Toolbar

YUICONF 2009


YUICONF 2009


Inspector
Problem: "[something] isn't showing up"

YUICONF 2009


Inspector

Step 1: Verify it's in the DOM

YUICONF 2009


Inspector


Step 2: Hover the element for highlight

YUICONF 2009


Inspector



Step 3: Check for missing/overridden styles

YUICONF 2009


Inspector




Step 4: Check the CSS of its ancestors

YUICONF 2009


Inspector





Step 5: Disable styles, position, zoom

YUICONF 2009


Inspector





Step 5: Disable styles, position, zoom

Step 6: Reduce

YUICONF 2009


Inspector

display: none;

visibility: hidden;

overflow: hidden;

z-index: x;

position: relative;

YUICONF 2009


✓ Inspectors
- Console
- Debuggers
- Community

YUICONF 2009


console

NO YES
alert(...); Y.log(...);

console.log(...);

YUICONF 2009


console

NO YES
alert(...); Y.log(...);
console.log(...);

YUICONF 2009


Y.log( msg, category, source )

if (this._isImageLoading(img)) {

Y.log(“Thumb image loading...”, 'info', 'slider');

// Schedule the sync for when the image loads/errors
this._scheduleSync();
} else {

Y.log(“No thumb image, or image already loaded. “ +
“Syncing immediately.”, 'info', 'slider');

this._ready(img,!this._isImageLoaded(img));
}

YUICONF 2009


Y.Console

new Y.Console().render();

YUICONF 2009


Y.Console
‣ Y.log(...)
‣ Cross browser
‣ Configurable
‣ Extendable
‣ Pluggable

YUICONF 2009


Y.Plugin.ConsoleFilters

new Y.Console()
.plug(Y.Plugin.ConsoleFilters)
.render();

YUICONF 2009


Configure YUI for debugging
YUI({
debug: true,
filter: ‘debug|raw’,
filters: {
module: ‘min|raw|debug’
},
logInclude: {
source: true
},
logExclude: {
source: true
}
})
YUICONF 2009


YUI({
debug: true,
filter: ‘debug|raw’,
filters: {
module: ‘min|raw|debug’
},
logInclude: {
source: true
},
logExclude: {
source: true
}
})
YUICONF 2009


YUI({
filter: ‘raw’,
filters: {
attribute: ‘debug’
}
})

YUICONF 2009


✓ Inspectors
✓ Console
- Debuggers
- Community

YUICONF 2009


Low hanging fruit

YUICONF 2009


Trailing commas break IE
“Expected identifier, string or number”

YUICONF 2009


Tip: Trailing commas break IE
“Expected identifier, string or number”

var obj = {
foo: “Foo”,
bar: “Bar”,
};

Culprit
YUICONF 2009


Wait for DOMReady
“Operation aborted”

YUICONF 2009


“Operation aborted”
Y.on("load", function () { ... }, window);

Y.on("domready", function () { ... });

Y.on("contentready", initFn, "#wrapper");

Y.on("available", initFn, "#el");

Y.one("body").prepend( newContent );

YUICONF 2009


Problem: "Where's my data?"
var data;

Y.io(url, {
on: {
success: function (id, o) {
data = o.responseText;
}
}
});

displayData(data);

YUICONF 2009


"Where's my data?"
var data;

Y.io(url, {
on: {
}
}
});

displayData(data);

YUICONF 2009


"Where's my data?"
var data; 1
2
Y.io(url, {
on: { 4
}
}
});
3
displayData(data);

YUICONF 2009


"Where's my data?"

YUICONF 2009


"Where's my data?"

‣ Expectation = breakpoint
‣ Console or Net for XHR inspection

YUICONF 2009


Problem: "X is not a function"
YUI(config).use('io-base', function (Y) {

function displayData(stuff) {
content = stuff || "BOOM";
Y.one('#x').setContent( content );
}

var data;

Y.io(url,{ on:{success: callback} });

displayData(data);
YUICONF 2009


"X is not a function"

"Object does not support this
property or method"

"TypeError: Result of expression
'Y.one' [undefined] is not a
function."

YUICONF 2009



YUICONF 2009



‣ Break on all errors

YUICONF 2009



‣ Documentation

YUICONF 2009



‣ Documentation
‣ Dependency Configurator

YUICONF 2009



FireBug

Web Inspector

YUICONF 2009


Problem: "Selector not working?"
YUI(config).use('node', function (Y) {

Y.one('div:contains(YUI)')
.addClass("where-u-at");

YUICONF 2009



Y.one('div:contains(YUI)')

selector-css3

YUICONF 2009


Missing module

YUICONF 2009


Missing module
Symptoms:

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors
‣ Y.one returns null
‣ Cross browser failure

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors

Usual suspects:

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors

Usual suspects:
‣ selector-css3
‣ event-mouseenter
‣ event-focus
YUICONF 2009



Y.all('div:contains(YUI)')

YUICONF 2009



Y.all('div:contains(YUI)')

selector-css3

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors
‣ Y.all returns empty NodeList

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors

Usual suspects:

YUICONF 2009


Missing module
Symptoms:
‣ Run time errors

Usual suspects:
‣ selector-css3
‣ event-mouseenter
‣ event-focus
YUICONF 2009


Missing module

Step 1: break the chain

YUICONF 2009


Missing module


Step 2: expectation = breakpoint

YUICONF 2009


Missing module


Step 2: expectation = breakpoint

Step 3: nodeList.size()

YUICONF 2009


and
Missing module
‣ Expectation = breakpoint
‣ Documentation
‣ Community

YUICONF 2009


Problem: "Can't access Y"

/* implementation */

});

// Y is not visible here

YUICONF 2009



YUICONF 2009


"Can't access Y"

YUICONF 2009


"Can't access Y"

Step 1: Assign Y to a local variable

YUICONF 2009


"Can't access Y"


Step 2: Combo url = synchronous

YUICONF 2009


"Can't access Y"


Step 2: Combo url = synchronous

Step 3: Undo step 1 and 2

YUICONF 2009


var Y = YUI().use('node', function (Y) {

/* implementation */

});

// Y IS visible here

YUICONF 2009


Problem: "I want the DOM node"

var node = Y.one("#myform .button");

var nodeList = Y.all("#myform .button");

YUICONF 2009


Problem: "I want the DOM node"

domNode = node._node;

domNodes = nodeList._nodes;

Y.Node.getDOMNode( node );

Y.NodeList.getDOMNodes( nodeList );

YUICONF 2009


Community
ydn-javascript
yui3
yuilibrary.com/forum
stackoverflow.com
#yui

YUICONF 2009


Community

"Help us help you"
ydn-javascript
yui3
yuilibrary.com/forum
stackoverflow.com
#yui

YUICONF 2009


Community

‣ Check the Forum archives
‣ Reduce
‣ gist

YUICONF 2009


http:gist.github.com

YUICONF 2009


Don’t be afraid to RTFS

YUICONF 2009


Preventative measures

‣ JSLint
‣ Markup validation
‣ Y.Test

YUICONF 2009


Final note

YUICONF 2009


Final note

ADD TESTS

YUICONF 2009


Oh, and remember

YUICONF 2009


Oh, and remember

It's your fault

YUICONF 2009


Oh, and remember

It's your fault

And add tests

YUICONF 2009


Oh, and remember

It's your fault

And add tests
Seriously

YUICONF 2009


Image credits

http://appraisalnewsonline.typepad.com/appraisal_news_for_real_e/
office_management/
http://www.flickr.com/photos/cibergaita/62123585/
http://www.bergoiata.org/fe/divers16/10.htm

YUICONF 2009


Debugging tips in YUI 3

Recommandé

Recommandé

Contenu connexe

Similaire à Debugging tips in YUI 3

Similaire à Debugging tips in YUI 3 (6)

Plus de Luke Smith

Plus de Luke Smith (8)

Dernier

Dernier (20)

Debugging tips in YUI 3