{"id":26124,"date":"2016-05-26T08:07:49","date_gmt":"2016-05-26T06:07:49","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=26124"},"modified":"2016-05-26T08:28:24","modified_gmt":"2016-05-26T06:28:24","slug":"javascript-debugging-tips","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2016\/05\/26\/javascript-debugging-tips\/","title":{"rendered":"JavaScript debugging tips"},"content":{"rendered":"\n

I came across this blog post<\/a> which provides some very handy tips for debugging JavaScript in the browser. \u00a0My favorite top three are:<\/p>\n

Display an object in a table format for an easier view<\/strong><\/p>\n

\r\nvar animals = [\r\n   { animal: \u2018Horse\u2019, name: \u2018Henry\u2019, age: 43 },\r\n   { animal: \u2018Dog\u2019, name: \u2018Fred\u2019, age: 13 },\r\n   { animal: \u2018Cat\u2019, name: \u2018Frodo\u2019, age: 18 }\r\n];\r\n \r\nconsole.table(animals);\r\n<\/pre>\n
with this output:<\/p>\n
\"console.table\"<\/a><\/p>\n
Unminify code as an easy way to debug JavaScript<\/strong><\/p>\n
\"unminify\"<\/a><\/p>\n
Custom console log messages<\/strong><\/p>\n
\r\nconsole.todo = function(msg) {\r\n\tconsole.log(\u2018 % c % s % s % s\u2018, \u2018color: yellow; background - color: black;\u2019, \u2018\u2013\u2018, msg, \u2018\u2013\u2018);\r\n}\r\n \r\nconsole.important = function(msg) {\r\n\tconsole.log(\u2018 % c % s % s % s\u2019, \u2018color: brown; font - weight: bold; text - decoration: underline;\u2019, \u2018\u2013\u2018, msg, \u2018\u2013\u2018);\r\n}\r\n \r\nconsole.todo(\u201cThis is something that\u2019 s need to be fixed\u201d);\r\nconsole.important(\u2018This is an important message\u2019);\r\n<\/pre>\n
for this result:<\/p>\n
\"console.log\"<\/a><\/p>\n
Very handy stuff!<\/p>\n\n","protected":false},"excerpt":{"rendered":"\n
I came across this blog post which provides some very handy tips for debugging JavaScript in the browser. \u00a0My favorite top three are: Display an object in a table format for an easier view var animals = [ { animal: \u2018Horse\u2019, name: \u2018Henry\u2019, age: 43 }, { animal: \u2018Dog\u2019, name: \u2018Fred\u2019, age: 13 }, { … Continue reading JavaScript debugging tips<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"JavaScript debugging tips #JavaScript #WebDev #programming","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1139,1330],"keyring_services":[],"class_list":["post-26124","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-javascript","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t