DokuWiki dtwjs

dtwjs:breaking_under_different_conditions

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T11:38:48+00:00

<- Stopping and looking around with simple breakpointsStepping into, over, and out of functions -> On ne peut pas mettre de breakpoint sur toutes les lignes (ex : } ); On peut mettre des conditions au breakpoint, lui assigner une expression. Si l'expression est évaluée à true, le breakpoint est respecté. direction === "left" //ici le code s'arrête si la variable direction est égale à left

dtwjs:debugging_a_mobile_site_in_firefox_and_android

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T13:43:19+00:00

<- Debugging a mobile site in the Safari and iOS inspectorDebugging an AngularJS application in Chrome -> Avec device physique : Configurer l'USB debugging : developer.android.com/tools/device.html#setting_up WebIDE -> open App

dtwjs:debugging_an_angularjs_application_in_chrome

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T13:44:00+00:00

<- Debugging a mobile site in Firefox and AndroidSetting up WebStorm for debugging -> Call stack -> Async checkbox il existe des extensions angular pour navigateur pour étendre les fonctionnalité des debug tools

dtwjs:debugging_the_use_of_a_jquery_plugin_in_firefox

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T12:31:25+00:00

<- Using source maps to debug minified filesFinding and fixing an issue in a jQuery plugin -> CMD+OPT+I / CTRL+MAJ+I : toggle dev tools CMP+OPT+S / CTRL+ALT+S : debugger Black boxing : Une source black boxée verra ses breakpoints ignorés, et le stepping le passe.

dtwjs:debugging_without_a_debugger

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T00:10:56+00:00

<- Why debugging AJAX can be trickyLeveraging more of the console API -> * Console Javascript * alert() * console.log()/info(), etc.

dtwjs:exploring_test-driven_development

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T14:36:01+00:00

<- Debugging a live site as a learning toolMore reading, courses to watch, and thanks! -> -> version control * version control for everyone * GitHub for Web Design * Fundamentals of Software Version Control -> test-Driven Development * describe a feature in simple code that fails * write code for feature until test passes * rerun tests when new features are added * -> Test-driven Develoment with node.js

dtwjs:finding_out_what_s_good_about_ides_and_editors

Anonymous (anonymous@undisclosed.example.com) — 2016-03-19T23:59:42+00:00

<- Getting the browsers and pluginsWhy debugging AJAX can be tricky -> Éditeurs texte : * Sublime Text * Adobe Brackets * BBEdit/TextWrangler Pourquoi c'est bien les IDE : * complétion du code * “mistake avoidance” * full-project navigation (ex : où cette fonction a-t-elle été définie ?) *

dtwjs:finding_out_where_you_are_using_the_call_stack

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T11:53:09+00:00

<- Stepping into, over, and out of functionsWatching variables more easily with watches -> Éviter les fonctions anonymes rend le call stack plus lisible. En cliquant dans le call stack on peut voir la fonction concernée, ainsi que l'état des variables dans ledit bloc.

dtwjs:getting_the_browsers_and_plugins

Anonymous (anonymous@undisclosed.example.com) — 2016-03-19T23:54:41+00:00

<- Important jargon and conceptsFinding out what's good about IDEs and editors -> * Chrome (ou Canary) * Debugger : Developer tools * Mobile : Remote debugging for Android (permet de contrôler à distance un Chrome mobile) * Mobile : iOS WebKit Debug Proxy (third-party project) * Firefox (ou Firefox Developer Edition)

dtwjs:important_jargon_and_concepts

Anonymous (anonymous@undisclosed.example.com) — 2016-03-19T23:46:24+00:00

<- Introducing our friend the debuggerGetting the browsers and plugins -> Jargon et concepts importants : * breakpoints : point (ligne) dans le code où l'on indique au debugger de faire quelque chose, usuellement de s'arréter, de suspendre l'éxécution du code. Un fois arrêté, on peut démarrer le “stepping

dtwjs:introducing_our_friend_the_debugger

Anonymous (anonymous@undisclosed.example.com) — 2016-03-19T23:37:42+00:00

<- Using the exercise filesImportant jargon and concepts -> Les debuggers permettent de : * mettre le code en pause * avancer dans le code ligne après ligne * inspecter ou suivre des variables

dtwjs:leveraging_more_of_the_console_api

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T00:23:29+00:00

<- Debugging without a debuggerStopping and looking around with simple breakpoints -> * dans la console, taper “console.” pour voir suggérer les différentes méthodes de l'objet console. * console.log(string, string, etc.) >> string_1 string_2 etc. * console.error() -> file un décompte du nombre de fois appelé Doc :

dtwjs:more_reading_courses_to_watch_and_thanks

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T14:35:22+00:00

<- Exploring test-driven development -> * JavaScript Essential Training * Debugging PHP - Advanced techniques * Javascript for web designer * jQuery for Web Designers * You don't Know JS book series : github.com/getify/You-Dont-Know-JS * Eloquent Javascript * Speaking Javascript * Exploring ES6

dtwjs:stepping_into_over_and_out_of_functions

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T11:52:57+00:00

<- Breaking under different conditionsFinding out where you are using the call stack -> * step over : on lit le code ligne à ligne (next function call) * step into : remonte dans le call stack * step out : descend dans le call stack : sortir de la fonction actuelle (en exécutant tout le code nécessaire) Clic droit sur numéro de ligne

dtwjs:stopping_and_looking_around_with_simple_breakpoints

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T11:28:55+00:00

<- Leveraging more of the console APIBreaking under different conditions -> Breakpoints : cliquer sur un numéro de ligne pour ajouter un breakpoint, celui-ci s'affiche dans le panel gauche. Plusieurs éléments sont présents dans le panel droit : Watch, call stack, scope (global, local), DOM Breakpoints, XHR Breakpoints, Event Listener Breakpoints.

dtwjs:using_source_maps_to_debug_minified_files

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T12:06:13+00:00

<- Watching variables more easily with watchesDebugging the use of a jQuery plugin in Firefox -> Dans chrome -> debugger settings -> Général -> enable source maps CMD+“+”/CMD+“-”/CMD+0 : soom in/out/reset zoom Le mapping ne résoud pas la question des watches -> utiliser la version dev et pas la version minifiée en développement.

dtwjs:watching_variables_more_easily_with_watches

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T12:01:16+00:00

<- Finding out where you are using the call stackUsing source maps to debug minified files -> Watches -> + -> indiquer le nom de la variable -> le debugger réévalue la valeur à chaque ligne On peut aussi avoir des expressions, pas que des variables : returntables.pop() : va effectuer pop à chaque évaluation ! Se référer à la doc pour davantage !

dtwjs:why_debugging_ajax_can_be_tricky

Anonymous (anonymous@undisclosed.example.com) — 2016-03-20T00:06:46+00:00

<- Finding out what's good about IDEs and editorsDebugging without a debugger -> * AJAX et sécurité web : problèmes pour bosser en local genre avec file:\ \ * Same-origin policy (en gros tous les assets doivent venir du même endroit) * CORS (Cross-Origin Resource Sharing) : sorte de contrôle d'accès pour AJAX, permet d'indiquer au serveur quels autres serveurs sont autorisés à utiliser leurs ressources.