{"id":278,"date":"2008-09-19T08:00:10","date_gmt":"2008-09-19T06:00:10","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=278"},"modified":"2008-09-19T08:00:10","modified_gmt":"2008-09-19T06:00:10","slug":"astuces-javascript-pour-mieux-debugger-votre-site","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/astuces-javascript-pour-mieux-debugger-votre-site\/","title":{"rendered":"Astuces Javascript pour mieux d\u00e9bugger votre site"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Quelque soit votre niveau de connaissance en CSS ou en javascript, en tant que d\u00e9veloppeur, vous vous \u00eates s\u00fbrement retrouv\u00e9s devant le cas o\u00f9 vous deviez recharger votre site pour observer le r\u00e9sultat de vos modifications. Et bien voici un script javascript simple qui va vous faciliter la vie.<\/p>\n

\"\"Quelque<\/a> soit<\/a> l’outil<\/a> performant <\/a>que vous utilisez pour corriger vos bugs, in fine, pour pouvoir observer le r\u00e9sultat de vos diverses corrections et am\u00e9liorations, vous \u00eates oblig\u00e9s de recharger votre page pour r\u00e9cup\u00e9rer les versions les plus r\u00e9centes de vos scripts. En re-lisant mon didactitiel sur le javascript<\/a>, une id\u00e9e simple m’a travers\u00e9 l’esprit. Et si, au lieu de toujours recharger ma page enti\u00e8re, comprenant le HTML, le CSS et le javascript,\u00a0 je ne chargeais que les fichiers qui ont \u00e9t\u00e9 modifi\u00e9s , c’est-\u00e0-dire, les scripts javascript et\/ou les feuilles de style externes. Cela me permettrait de voir la mise \u00e0 jour de ma page sans avoir \u00e0 la recharger compl\u00e8tement, une perspective int\u00e9ressante si vous \u00eates en train de coder une application Ajax, par exemple. Donc apr\u00e8s une petite r\u00e9flexion de 5 minutes et un codage encore plus rapide, je vous pr\u00e9sente le code qui va vous permettre de recharger les scripts et les feuilles de style externes d’une page web<\/strong>. C’est tellement simple et efficace que je me demande si quelqu’un n’a pas d\u00e9j\u00e0 eu cette id\u00e9e sur le net \ud83d\ude42 .<\/p>\n

\/\/CSS reload\nvar reloadCSS = function() {\n   var l = document.getElementsByTagName('link');\n   var t = new Date().getTime();\n   var o, a;\n   for (var i = 0; o = l[i]; i += 1) {\n        if (\/stylesheet\/i.test(o.rel) && o.href) { \/\/si c'est une feuille de style\n            a = o.href.replace(\/(&|?)timestamp=d+\/, '');\n            o.href = a + (a.indexOf('?') === -1 ? '?' : '&') + 'timestamp=' + t;\n        }\n    }\n};\n\n\/\/Javascript reload\nvar reloadJS = function() {\n   var l = document.getElementsByTagName('script'); \n   var t = new Date().getTime();\n   var o, a;\n    for (var i = 0; o = l[i]; i += 1) {\n        if (\/javascript\/i.test(o.type) && o.src) { \/\/si c'est un javascript\n            a = o.src.replace(\/(&|?)timestamp=d+\/, '');\n            o.src = a + (a.indexOf('?') === -1 ? '?' : '&') + 'timestamp=' + t;\n        }\n    }\n};<\/pre>\n
Il ne nous reste plus qu’\u00e0 rajouter dans notre page un lien ou une balise qui permettra d’appeler nos fonctions comme suit :<\/p>\n
<input type="button" value="recharger le CSS" onclick="reloadCSS();" \/>\n<input type="button" value="recharger le javascript" onclick="reloadJS();" \/>\n<input type="button" value="recharger le CSS ET le javascript" onclick="reloadCSS(); reloadJS();" \/><\/pre>\n
Et voila!!! Bien s\u00fbr, une fois en production, vous n’oublierez pas de commenter les boutons<\/strong> pour les r\u00e9-utiliser au moindre debug, on ne sait jamais \ud83d\ude09 .<\/p>\n
    \n
  • A noter, le dernier bouton permet via un appel unique de mettre \u00e0 jour le CSS et le Javascript externe de votre page\/site<\/em>.<\/li>\n
  • Pour que le script reloadJS<\/code> fonctionne il faut que votre balise script<\/code> contienne l’attribut type<\/code> avec la valeur recommand\u00e9e par le W3C.<\/em><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Une fonction simple pour faciliter le debug CSS et\/ou javascript de votre site<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[46,135,152,253,292,334,566],"class_list":["post-278","post","type-post","status-publish","format-standard","hentry","category-web","tag-astuce","tag-css","tag-debugger","tag-html","tag-javascript","tag-librairie-javascript","tag-webdesign"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/278\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}