SlideShare a Scribd company logo

Debugging tips in YUI 3

Luke Smith, profile picture
Luke Smith

The document outlines key challenges and tools in debugging with YUI 3, emphasizing the complexity of web development due to various layers such as HTML, CSS, and JavaScript. It discusses the importance of understanding the problem space, using debugging tools like inspectors, consoles, and community support, and provides practical steps for troubleshooting issues. Examples are given for common problems users encounter, alongside debugging techniques and best practices to enhance the debugging process.

Technology
Related topics:
Web Development
1 of 148
Downloaded 25 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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 Tuesday, January 18, 2011
Web development is hard YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML Tag soup Quirks mode Unsupported tags YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML CSS Tag soup Cascade/Specificity Quirks mode Stacking context Unsupported tags Box model YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Reflows Event system Asynchronicity YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Browser Reflows Implementations Event system Security policy Asynchronicity Bugs YUICONF 2009 Tuesday, January 18, 2011
This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Browser Library Reflows Implementations Inconsistent API Event system Security policy Version nuances Asynchronicity Bugs Bugs YUICONF 2009 Tuesday, January 18, 2011
Environment ‣ Complexity ‣ Inconsistency ‣ Bugs YUICONF 2009 Tuesday, January 18, 2011
The actual problem (understand the problem space) YUICONF 2009 Tuesday, January 18, 2011
It’s the nature of a library to change the playing field CSS Required HTML knowledge DOM Browser JS YUICONF 2009 Tuesday, January 18, 2011
It’s the nature of a library to change the playing field Required Browser Library knowledge CSS HTML DOM JS YUICONF 2009 Tuesday, January 18, 2011
We try Consistent API Much improved Interoperability Still great Documentation Good, but can improve Bugs Where?! YUICONF 2009 Tuesday, January 18, 2011
What we have to work with YUICONF 2009 Tuesday, January 18, 2011
What we have to work with ‣ Inspectors YUICONF 2009 Tuesday, January 18, 2011
What we have to work with ‣ Inspectors ‣ Console YUICONF 2009 Tuesday, January 18, 2011
What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers YUICONF 2009 Tuesday, January 18, 2011
What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers ‣ Community YUICONF 2009 Tuesday, January 18, 2011
What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers ‣ Community YUICONF 2009 Tuesday, January 18, 2011
Inspector YUICONF 2009 Tuesday, January 18, 2011
Console YUICONF 2009 Tuesday, January 18, 2011
Console YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
Debugger YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
FireBug YUICONF 2009 Tuesday, January 18, 2011
Web Inspector YUICONF 2009 Tuesday, January 18, 2011
Web Inspector YUICONF 2009 Tuesday, January 18, 2011
Web Inspector YUICONF 2009 Tuesday, January 18, 2011
Web Inspector YUICONF 2009 Tuesday, January 18, 2011
Dragonfly YUICONF 2009 Tuesday, January 18, 2011
Dragonfly YUICONF 2009 Tuesday, January 18, 2011
Dragonfly YUICONF 2009 Tuesday, January 18, 2011
Dragonfly YUICONF 2009 Tuesday, January 18, 2011
IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
IE6 and (true) IE7? YUICONF 2009 Tuesday, January 18, 2011
MS Visual Web Developer Express Edition YUICONF 2009 Tuesday, January 18, 2011
MS Visual Web Developer Express Edition YUICONF 2009 Tuesday, January 18, 2011
IE Developer Toolbar YUICONF 2009 Tuesday, January 18, 2011
Developer tools Firefox Safari Opera IE8 IE7 IE6 YUICONF 2009 Tuesday, January 18, 2011
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 Tuesday, January 18, 2011
YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors Step 5: Disable styles, position, zoom YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors Step 5: Disable styles, position, zoom Step 6: Reduce YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" display: none; visibility: hidden; overflow: hidden; z-index: x; position: relative; YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
✓ Inspectors - Console - Debuggers - Community YUICONF 2009 Tuesday, January 18, 2011
console NO YES alert(...); Y.log(...); console.log(...); YUICONF 2009 Tuesday, January 18, 2011
console NO YES alert(...); Y.log(...); console.log(...); YUICONF 2009 Tuesday, January 18, 2011
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 Tuesday, January 18, 2011
Y.Console new Y.Console().render(); YUICONF 2009 Tuesday, January 18, 2011
Y.Console ‣ Y.log(...) ‣ Cross browser ‣ Configurable ‣ Extendable ‣ Pluggable YUICONF 2009 Tuesday, January 18, 2011
Y.Plugin.ConsoleFilters new Y.Console() .plug(Y.Plugin.ConsoleFilters) .render(); YUICONF 2009 Tuesday, January 18, 2011
Configure YUI for debugging YUI({ debug: true, filter: ‘debug|raw’, filters: { module: ‘min|raw|debug’ }, logInclude: { source: true }, logExclude: { source: true } }) YUICONF 2009 Tuesday, January 18, 2011
YUI({ debug: true, filter: ‘debug|raw’, filters: { module: ‘min|raw|debug’ }, logInclude: { source: true }, logExclude: { source: true } }) YUICONF 2009 Tuesday, January 18, 2011
YUI({ filter: ‘raw’, filters: { attribute: ‘debug’ } }) YUICONF 2009 Tuesday, January 18, 2011
✓ Inspectors ✓ Console - Debuggers - Community YUICONF 2009 Tuesday, January 18, 2011
Low hanging fruit YUICONF 2009 Tuesday, January 18, 2011
Trailing commas break IE “Expected identifier, string or number” YUICONF 2009 Tuesday, January 18, 2011
Trailing commas break IE “Expected identifier, string or number” YUICONF 2009 Tuesday, January 18, 2011
Tip: Trailing commas break IE “Expected identifier, string or number” var obj = { foo: “Foo”, bar: “Bar”, }; Culprit YUICONF 2009 Tuesday, January 18, 2011
Wait for DOMReady “Operation aborted” YUICONF 2009 Tuesday, January 18, 2011
“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 Tuesday, January 18, 2011
Problem: "Where's my data?" var data; Y.io(url, { on: { success: function (id, o) { data = o.responseText; } } }); displayData(data); YUICONF 2009 Tuesday, January 18, 2011
"Where's my data?" var data; Y.io(url, { on: { success: function (id, o) { data = o.responseText; } } }); displayData(data); YUICONF 2009 Tuesday, January 18, 2011
"Where's my data?" var data; 1 2 Y.io(url, { on: { 4 success: function (id, o) { data = o.responseText; } } }); 3 displayData(data); YUICONF 2009 Tuesday, January 18, 2011
"Where's my data?" YUICONF 2009 Tuesday, January 18, 2011
"Where's my data?" YUICONF 2009 Tuesday, January 18, 2011
"Where's my data?" ‣ Expectation = breakpoint ‣ Console or Net for XHR inspection YUICONF 2009 Tuesday, January 18, 2011
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 Tuesday, January 18, 2011
"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 Tuesday, January 18, 2011
"X is not a function" YUICONF 2009 Tuesday, January 18, 2011
"X is not a function" ‣ Break on all errors YUICONF 2009 Tuesday, January 18, 2011
"X is not a function" ‣ Break on all errors ‣ Documentation YUICONF 2009 Tuesday, January 18, 2011
"X is not a function" ‣ Break on all errors ‣ Documentation ‣ Dependency Configurator YUICONF 2009 Tuesday, January 18, 2011
"X is not a function" FireBug Web Inspector YUICONF 2009 Tuesday, January 18, 2011
Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.one('div:contains(YUI)') .addClass("where-u-at"); YUICONF 2009 Tuesday, January 18, 2011
Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.one('div:contains(YUI)') .addClass("where-u-at"); selector-css3 YUICONF 2009 Tuesday, January 18, 2011
Missing module YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure Usual suspects: YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure Usual suspects: ‣ selector-css3 ‣ event-mouseenter ‣ event-focus YUICONF 2009 Tuesday, January 18, 2011
Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.all('div:contains(YUI)') .addClass("where-u-at"); YUICONF 2009 Tuesday, January 18, 2011
Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.all('div:contains(YUI)') .addClass("where-u-at"); selector-css3 YUICONF 2009 Tuesday, January 18, 2011
Missing module YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure Usual suspects: YUICONF 2009 Tuesday, January 18, 2011
Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure Usual suspects: ‣ selector-css3 ‣ event-mouseenter ‣ event-focus YUICONF 2009 Tuesday, January 18, 2011
Missing module YUICONF 2009 Tuesday, January 18, 2011
Missing module Step 1: break the chain YUICONF 2009 Tuesday, January 18, 2011
Missing module Step 1: break the chain Step 2: expectation = breakpoint YUICONF 2009 Tuesday, January 18, 2011
Missing module Step 1: break the chain Step 2: expectation = breakpoint Step 3: nodeList.size() YUICONF 2009 Tuesday, January 18, 2011
Missing module YUICONF 2009 Tuesday, January 18, 2011
Missing module YUICONF 2009 Tuesday, January 18, 2011
"X is not a function" and Missing module ‣ Break on all errors ‣ Expectation = breakpoint ‣ Documentation ‣ Community YUICONF 2009 Tuesday, January 18, 2011
Problem: "Can't access Y" YUI(config).use('node', function (Y) { /* implementation */ }); // Y is not visible here YUICONF 2009 Tuesday, January 18, 2011
Problem: "Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
"Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
"Can't access Y" Step 1: Assign Y to a local variable YUICONF 2009 Tuesday, January 18, 2011
"Can't access Y" Step 1: Assign Y to a local variable Step 2: Combo url = synchronous YUICONF 2009 Tuesday, January 18, 2011
"Can't access Y" Step 1: Assign Y to a local variable Step 2: Combo url = synchronous Step 3: Undo step 1 and 2 YUICONF 2009 Tuesday, January 18, 2011
"Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
Problem: "Can't access Y" var Y = YUI().use('node', function (Y) { /* implementation */ }); // Y IS visible here YUICONF 2009 Tuesday, January 18, 2011
Problem: "I want the DOM node" var node = Y.one("#myform .button"); var nodeList = Y.all("#myform .button"); YUICONF 2009 Tuesday, January 18, 2011
Problem: "I want the DOM node" domNode = node._node; domNodes = nodeList._nodes; Y.Node.getDOMNode( node ); Y.NodeList.getDOMNodes( nodeList ); YUICONF 2009 Tuesday, January 18, 2011
Community ydn-javascript yui3 yuilibrary.com/forum stackoverflow.com #yui YUICONF 2009 Tuesday, January 18, 2011
Community "Help us help you" ydn-javascript yui3 yuilibrary.com/forum stackoverflow.com #yui YUICONF 2009 Tuesday, January 18, 2011
Community ‣ Check the Forum archives ‣ Reduce ‣ gist YUICONF 2009 Tuesday, January 18, 2011
http:gist.github.com YUICONF 2009 Tuesday, January 18, 2011
Don’t be afraid to RTFS YUICONF 2009 Tuesday, January 18, 2011
Preventative measures ‣ JSLint ‣ Markup validation ‣ Y.Test YUICONF 2009 Tuesday, January 18, 2011
Final note YUICONF 2009 Tuesday, January 18, 2011
Final note ADD TESTS YUICONF 2009 Tuesday, January 18, 2011
Oh, and remember YUICONF 2009 Tuesday, January 18, 2011
Oh, and remember It's your fault YUICONF 2009 Tuesday, January 18, 2011
Oh, and remember It's your fault And add tests YUICONF 2009 Tuesday, January 18, 2011
Oh, and remember It's your fault And add tests Seriously YUICONF 2009 Tuesday, January 18, 2011
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 Tuesday, January 18, 2011

More Related Content

PDF
clipperz @ JSE2011
gcsolaroli
 
PDF
Breaking the Mobile Web with HTML5
Maximiliano Firtman
 
PDF
iOS Testing with Frank
Sean Woodhouse
 
PPTX
YUI Hidden Gems
Andrew Wooldridge
 
PDF
Capitol js
Brendan Eich
 
KEY
Beautiful Documentation with YUI Doc
Stephen Woods
 
PDF
A Re-Introduction to Third-Party Scripting
benvinegar
 
PDF
Re-Introduction to Third-party Scripting
benvinegar
 
clipperz @ JSE2011
gcsolaroli
 
Breaking the Mobile Web with HTML5
Maximiliano Firtman
 
iOS Testing with Frank
Sean Woodhouse
 
YUI Hidden Gems
Andrew Wooldridge
 
Capitol js
Brendan Eich
 
Beautiful Documentation with YUI Doc
Stephen Woods
 
A Re-Introduction to Third-Party Scripting
benvinegar
 
Re-Introduction to Third-party Scripting
benvinegar
 

Similar to Debugging tips in YUI 3 (20)

PDF
Paris Web - Javascript as a programming language
Marco Cedaro
 
PDF
YUI 3: Events Evolved
Luke Smith
 
KEY
Creating custom modules using YUI3
Gonzalo Cordero
 
PDF
HTML5: Toolkits and Gaps
dylanks
 
PDF
Javascript FTW
Pascal Rettig
 
PDF
Infusion for the birds
colinbdclark
 
PDF
Go Course Day1
guest83950e2
 
KEY
YOOX Launch & Learn - Javascript as a programming language
Marco Cedaro
 
PDF
Calloway introduction
Corey Oordt
 
PDF
CICS JS/Server V2 - Presentation
Matter of Fact Software
 
KEY
Geek Meet: Web Typography and sIFR 3
Mark Wubben
 
KEY
Remixing Confluence With Speakeasy
nabeelahali
 
PDF
Refreshdc html5css3-090719085307-phpapp01
Apoorvi Kapoor
 
PDF
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
 
PDF
Introduction to symfony2
Pablo Godel
 
PDF
Html5 intro
Ynon Perek
 
PDF
How I stopped worrying about and loved DumpRenderTree
Hajime Morrita
 
PDF
Dojo Mobile
dylanks
 
PDF
Finding harmony in web development
Christian Heilmann
 
KEY
jsDay - Javascript as a programming language
Marco Cedaro
 
Paris Web - Javascript as a programming language
Marco Cedaro
 
YUI 3: Events Evolved
Luke Smith
 
Creating custom modules using YUI3
Gonzalo Cordero
 
HTML5: Toolkits and Gaps
dylanks
 
Javascript FTW
Pascal Rettig
 
Infusion for the birds
colinbdclark
 
Go Course Day1
guest83950e2
 
YOOX Launch & Learn - Javascript as a programming language
Marco Cedaro
 
Calloway introduction
Corey Oordt
 
CICS JS/Server V2 - Presentation
Matter of Fact Software
 
Geek Meet: Web Typography and sIFR 3
Mark Wubben
 
Remixing Confluence With Speakeasy
nabeelahali
 
Refreshdc html5css3-090719085307-phpapp01
Apoorvi Kapoor
 
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
 
Introduction to symfony2
Pablo Godel
 
Html5 intro
Ynon Perek
 
How I stopped worrying about and loved DumpRenderTree
Hajime Morrita
 
Dojo Mobile
dylanks
 
Finding harmony in web development
Christian Heilmann
 
jsDay - Javascript as a programming language
Marco Cedaro
 
Ad

More from Luke Smith (8)

PDF
Promises. The basics, from Promises/A+
Luke Smith
 
KEY
Attribute
Luke Smith
 
KEY
Inheritance patterns
Luke Smith
 
PPTX
Hack with YUI
Luke Smith
 
PDF
YUI 3 quick overview
Luke Smith
 
PDF
YUI 3: Below the Surface
Luke Smith
 
KEY
Yui3
Luke Smith
 
KEY
Front end engineering, YUI Gallery, and your future
Luke Smith
 
Promises. The basics, from Promises/A+
Luke Smith
 
Attribute
Luke Smith
 
Inheritance patterns
Luke Smith
 
Hack with YUI
Luke Smith
 
YUI 3 quick overview
Luke Smith
 
YUI 3: Below the Surface
Luke Smith
 
Yui3
Luke Smith
 
Front end engineering, YUI Gallery, and your future
Luke Smith
 
Ad

Recently uploaded (20)

PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
Cloud computing and distributed systems.
kkkkkhan
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
Encapsulation theory and applications.pdf
gurumoop
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 

Debugging tips in YUI 3

  • 1. Debugging in YUI 3 Luke Smith yuilibrary: lsmith github: lsmith twitter: @ls_n YUICONF 2009 Tuesday, January 18, 2011
  • 2. “Debugging is all about challenging your own assumptions. At least one of them was obviously wrong.” -- some bald guy YUICONF 2009 Tuesday, January 18, 2011
  • 3. Web development is hard YUICONF 2009 Tuesday, January 18, 2011
  • 4. This is what we're up against YUICONF 2009 Tuesday, January 18, 2011
  • 5. This is what we're up against HTML Tag soup Quirks mode Unsupported tags YUICONF 2009 Tuesday, January 18, 2011
  • 6. This is what we're up against HTML CSS Tag soup Cascade/Specificity Quirks mode Stacking context Unsupported tags Box model YUICONF 2009 Tuesday, January 18, 2011
  • 7. This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this YUICONF 2009 Tuesday, January 18, 2011
  • 8. This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Reflows Event system Asynchronicity YUICONF 2009 Tuesday, January 18, 2011
  • 9. This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Browser Reflows Implementations Event system Security policy Asynchronicity Bugs YUICONF 2009 Tuesday, January 18, 2011
  • 10. This is what we're up against HTML CSS JavaScript Tag soup Cascade/Specificity Function scoping Quirks mode Stacking context Late binding Unsupported tags Box model this DOM Browser Library Reflows Implementations Inconsistent API Event system Security policy Version nuances Asynchronicity Bugs Bugs YUICONF 2009 Tuesday, January 18, 2011
  • 11. Environment ‣ Complexity ‣ Inconsistency ‣ Bugs YUICONF 2009 Tuesday, January 18, 2011
  • 12. The actual problem (understand the problem space) YUICONF 2009 Tuesday, January 18, 2011
  • 13. It’s the nature of a library to change the playing field CSS Required HTML knowledge DOM Browser JS YUICONF 2009 Tuesday, January 18, 2011
  • 14. It’s the nature of a library to change the playing field Required Browser Library knowledge CSS HTML DOM JS YUICONF 2009 Tuesday, January 18, 2011
  • 15. We try Consistent API Much improved Interoperability Still great Documentation Good, but can improve Bugs Where?! YUICONF 2009 Tuesday, January 18, 2011
  • 16. What we have to work with YUICONF 2009 Tuesday, January 18, 2011
  • 17. What we have to work with ‣ Inspectors YUICONF 2009 Tuesday, January 18, 2011
  • 18. What we have to work with ‣ Inspectors ‣ Console YUICONF 2009 Tuesday, January 18, 2011
  • 19. What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers YUICONF 2009 Tuesday, January 18, 2011
  • 20. What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers ‣ Community YUICONF 2009 Tuesday, January 18, 2011
  • 21. What we have to work with ‣ Inspectors ‣ Console ‣ Debuggers ‣ Community YUICONF 2009 Tuesday, January 18, 2011
  • 22. Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 23. Console YUICONF 2009 Tuesday, January 18, 2011
  • 24. Console YUICONF 2009 Tuesday, January 18, 2011
  • 25. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 26. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 27. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 28. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 29. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 30. Debugger YUICONF 2009 Tuesday, January 18, 2011
  • 31. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 32. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 33. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 34. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 35. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 36. FireBug YUICONF 2009 Tuesday, January 18, 2011
  • 37. Web Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 38. Web Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 39. Web Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 40. Web Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 41. Dragonfly YUICONF 2009 Tuesday, January 18, 2011
  • 42. Dragonfly YUICONF 2009 Tuesday, January 18, 2011
  • 43. Dragonfly YUICONF 2009 Tuesday, January 18, 2011
  • 44. Dragonfly YUICONF 2009 Tuesday, January 18, 2011
  • 45. IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
  • 46. IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
  • 47. IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
  • 48. IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
  • 49. IE Developer Tools YUICONF 2009 Tuesday, January 18, 2011
  • 50. IE6 and (true) IE7? YUICONF 2009 Tuesday, January 18, 2011
  • 51. MS Visual Web Developer Express Edition YUICONF 2009 Tuesday, January 18, 2011
  • 52. MS Visual Web Developer Express Edition YUICONF 2009 Tuesday, January 18, 2011
  • 53. IE Developer Toolbar YUICONF 2009 Tuesday, January 18, 2011
  • 54. Developer tools Firefox Safari Opera IE8 IE7 IE6 YUICONF 2009 Tuesday, January 18, 2011
  • 55. 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 Tuesday, January 18, 2011
  • 57. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 58. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM YUICONF 2009 Tuesday, January 18, 2011
  • 59. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight YUICONF 2009 Tuesday, January 18, 2011
  • 60. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles YUICONF 2009 Tuesday, January 18, 2011
  • 61. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors YUICONF 2009 Tuesday, January 18, 2011
  • 62. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors Step 5: Disable styles, position, zoom YUICONF 2009 Tuesday, January 18, 2011
  • 63. Inspector Problem: "[something] isn't showing up" Step 1: Verify it's in the DOM Step 2: Hover the element for highlight Step 3: Check for missing/overridden styles Step 4: Check the CSS of its ancestors Step 5: Disable styles, position, zoom Step 6: Reduce YUICONF 2009 Tuesday, January 18, 2011
  • 64. Inspector Problem: "[something] isn't showing up" display: none; visibility: hidden; overflow: hidden; z-index: x; position: relative; YUICONF 2009 Tuesday, January 18, 2011
  • 65. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 66. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 67. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 68. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 69. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 70. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 71. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 72. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 73. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 74. Inspector Problem: "[something] isn't showing up" YUICONF 2009 Tuesday, January 18, 2011
  • 75. ✓ Inspectors - Console - Debuggers - Community YUICONF 2009 Tuesday, January 18, 2011
  • 76. console NO YES alert(...); Y.log(...); console.log(...); YUICONF 2009 Tuesday, January 18, 2011
  • 77. console NO YES alert(...); Y.log(...); console.log(...); YUICONF 2009 Tuesday, January 18, 2011
  • 78. 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 Tuesday, January 18, 2011
  • 79. Y.Console new Y.Console().render(); YUICONF 2009 Tuesday, January 18, 2011
  • 80. Y.Console ‣ Y.log(...) ‣ Cross browser ‣ Configurable ‣ Extendable ‣ Pluggable YUICONF 2009 Tuesday, January 18, 2011
  • 81. Y.Plugin.ConsoleFilters new Y.Console() .plug(Y.Plugin.ConsoleFilters) .render(); YUICONF 2009 Tuesday, January 18, 2011
  • 82. Configure YUI for debugging YUI({ debug: true, filter: ‘debug|raw’, filters: { module: ‘min|raw|debug’ }, logInclude: { source: true }, logExclude: { source: true } }) YUICONF 2009 Tuesday, January 18, 2011
  • 83. YUI({ debug: true, filter: ‘debug|raw’, filters: { module: ‘min|raw|debug’ }, logInclude: { source: true }, logExclude: { source: true } }) YUICONF 2009 Tuesday, January 18, 2011
  • 84. YUI({ filter: ‘raw’, filters: { attribute: ‘debug’ } }) YUICONF 2009 Tuesday, January 18, 2011
  • 85. ✓ Inspectors ✓ Console - Debuggers - Community YUICONF 2009 Tuesday, January 18, 2011
  • 86. Low hanging fruit YUICONF 2009 Tuesday, January 18, 2011
  • 87. Trailing commas break IE “Expected identifier, string or number” YUICONF 2009 Tuesday, January 18, 2011
  • 88. Trailing commas break IE “Expected identifier, string or number” YUICONF 2009 Tuesday, January 18, 2011
  • 89. Tip: Trailing commas break IE “Expected identifier, string or number” var obj = { foo: “Foo”, bar: “Bar”, }; Culprit YUICONF 2009 Tuesday, January 18, 2011
  • 90. Wait for DOMReady “Operation aborted” YUICONF 2009 Tuesday, January 18, 2011
  • 91. “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 Tuesday, January 18, 2011
  • 92. Problem: "Where's my data?" var data; Y.io(url, { on: { success: function (id, o) { data = o.responseText; } } }); displayData(data); YUICONF 2009 Tuesday, January 18, 2011
  • 93. "Where's my data?" var data; Y.io(url, { on: { success: function (id, o) { data = o.responseText; } } }); displayData(data); YUICONF 2009 Tuesday, January 18, 2011
  • 94. "Where's my data?" var data; 1 2 Y.io(url, { on: { 4 success: function (id, o) { data = o.responseText; } } }); 3 displayData(data); YUICONF 2009 Tuesday, January 18, 2011
  • 95. "Where's my data?" YUICONF 2009 Tuesday, January 18, 2011
  • 96. "Where's my data?" YUICONF 2009 Tuesday, January 18, 2011
  • 97. "Where's my data?" ‣ Expectation = breakpoint ‣ Console or Net for XHR inspection YUICONF 2009 Tuesday, January 18, 2011
  • 98. 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 Tuesday, January 18, 2011
  • 99. "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 Tuesday, January 18, 2011
  • 100. "X is not a function" YUICONF 2009 Tuesday, January 18, 2011
  • 101. "X is not a function" ‣ Break on all errors YUICONF 2009 Tuesday, January 18, 2011
  • 102. "X is not a function" ‣ Break on all errors ‣ Documentation YUICONF 2009 Tuesday, January 18, 2011
  • 103. "X is not a function" ‣ Break on all errors ‣ Documentation ‣ Dependency Configurator YUICONF 2009 Tuesday, January 18, 2011
  • 104. "X is not a function" FireBug Web Inspector YUICONF 2009 Tuesday, January 18, 2011
  • 105. Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.one('div:contains(YUI)') .addClass("where-u-at"); YUICONF 2009 Tuesday, January 18, 2011
  • 106. Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.one('div:contains(YUI)') .addClass("where-u-at"); selector-css3 YUICONF 2009 Tuesday, January 18, 2011
  • 107. Missing module YUICONF 2009 Tuesday, January 18, 2011
  • 108. Missing module Symptoms: YUICONF 2009 Tuesday, January 18, 2011
  • 109. Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure YUICONF 2009 Tuesday, January 18, 2011
  • 110. Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure Usual suspects: YUICONF 2009 Tuesday, January 18, 2011
  • 111. Missing module Symptoms: ‣ Run time errors ‣ Y.one returns null ‣ Cross browser failure Usual suspects: ‣ selector-css3 ‣ event-mouseenter ‣ event-focus YUICONF 2009 Tuesday, January 18, 2011
  • 112. Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.all('div:contains(YUI)') .addClass("where-u-at"); YUICONF 2009 Tuesday, January 18, 2011
  • 113. Problem: "Selector not working?" YUI(config).use('node', function (Y) { Y.all('div:contains(YUI)') .addClass("where-u-at"); selector-css3 YUICONF 2009 Tuesday, January 18, 2011
  • 114. Missing module YUICONF 2009 Tuesday, January 18, 2011
  • 115. Missing module Symptoms: YUICONF 2009 Tuesday, January 18, 2011
  • 116. Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure YUICONF 2009 Tuesday, January 18, 2011
  • 117. Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure Usual suspects: YUICONF 2009 Tuesday, January 18, 2011
  • 118. Missing module Symptoms: ‣ Run time errors ‣ Y.all returns empty NodeList ‣ Cross browser failure Usual suspects: ‣ selector-css3 ‣ event-mouseenter ‣ event-focus YUICONF 2009 Tuesday, January 18, 2011
  • 119. Missing module YUICONF 2009 Tuesday, January 18, 2011
  • 120. Missing module Step 1: break the chain YUICONF 2009 Tuesday, January 18, 2011
  • 121. Missing module Step 1: break the chain Step 2: expectation = breakpoint YUICONF 2009 Tuesday, January 18, 2011
  • 122. Missing module Step 1: break the chain Step 2: expectation = breakpoint Step 3: nodeList.size() YUICONF 2009 Tuesday, January 18, 2011
  • 123. Missing module YUICONF 2009 Tuesday, January 18, 2011
  • 124. Missing module YUICONF 2009 Tuesday, January 18, 2011
  • 125. "X is not a function" and Missing module ‣ Break on all errors ‣ Expectation = breakpoint ‣ Documentation ‣ Community YUICONF 2009 Tuesday, January 18, 2011
  • 126. Problem: "Can't access Y" YUI(config).use('node', function (Y) { /* implementation */ }); // Y is not visible here YUICONF 2009 Tuesday, January 18, 2011
  • 127. Problem: "Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
  • 128. "Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
  • 129. "Can't access Y" Step 1: Assign Y to a local variable YUICONF 2009 Tuesday, January 18, 2011
  • 130. "Can't access Y" Step 1: Assign Y to a local variable Step 2: Combo url = synchronous YUICONF 2009 Tuesday, January 18, 2011
  • 131. "Can't access Y" Step 1: Assign Y to a local variable Step 2: Combo url = synchronous Step 3: Undo step 1 and 2 YUICONF 2009 Tuesday, January 18, 2011
  • 132. "Can't access Y" YUICONF 2009 Tuesday, January 18, 2011
  • 133. Problem: "Can't access Y" var Y = YUI().use('node', function (Y) { /* implementation */ }); // Y IS visible here YUICONF 2009 Tuesday, January 18, 2011
  • 134. Problem: "I want the DOM node" var node = Y.one("#myform .button"); var nodeList = Y.all("#myform .button"); YUICONF 2009 Tuesday, January 18, 2011
  • 135. Problem: "I want the DOM node" domNode = node._node; domNodes = nodeList._nodes; Y.Node.getDOMNode( node ); Y.NodeList.getDOMNodes( nodeList ); YUICONF 2009 Tuesday, January 18, 2011
  • 136. Community ydn-javascript yui3 yuilibrary.com/forum stackoverflow.com #yui YUICONF 2009 Tuesday, January 18, 2011
  • 137. Community "Help us help you" ydn-javascript yui3 yuilibrary.com/forum stackoverflow.com #yui YUICONF 2009 Tuesday, January 18, 2011
  • 138. Community ‣ Check the Forum archives ‣ Reduce ‣ gist YUICONF 2009 Tuesday, January 18, 2011
  • 139. http:gist.github.com YUICONF 2009 Tuesday, January 18, 2011
  • 140. Don’t be afraid to RTFS YUICONF 2009 Tuesday, January 18, 2011
  • 141. Preventative measures ‣ JSLint ‣ Markup validation ‣ Y.Test YUICONF 2009 Tuesday, January 18, 2011
  • 142. Final note YUICONF 2009 Tuesday, January 18, 2011
  • 143. Final note ADD TESTS YUICONF 2009 Tuesday, January 18, 2011
  • 144. Oh, and remember YUICONF 2009 Tuesday, January 18, 2011
  • 145. Oh, and remember It's your fault YUICONF 2009 Tuesday, January 18, 2011
  • 146. Oh, and remember It's your fault And add tests YUICONF 2009 Tuesday, January 18, 2011
  • 147. Oh, and remember It's your fault And add tests Seriously YUICONF 2009 Tuesday, January 18, 2011
  • 148. 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 Tuesday, January 18, 2011