Frontity Talks 2020-09 - Debugging Frontity Sites

In this episode of #FrontityTalks JuanMa and Michael from the Developer Relations team outline a number of techniques you can use for debugging your JavaScript, both in the browser and on the server, using a variety of tools and methods - including debugging server-side node.js code in your IDE/code editor (we demonstrate this using our preferred code editor VS Code). ---------- Timeline * 00:00 Intro * 00:31 Introducing the topic * 02:03 Isomorphic React Apps in Frontity * 07:27 Debug Client & Server Side with "console.log" * 11:47 Debug only Client Side with "console.log" * 13:46 Using "debugger" in the Client Side * 19:45 Using "debugger" in the Server Side * 25:23 Debug in the Server Side with Visual Code * 36:36 Outro ---------- Resources & links in the video Diagram used in the video: https://excalidraw.com/#json=6246086339461120,05e2Mcn9gst9mhl3LsKK0w Debug with Visual Code https://code.visualstudio.com/docs/nodejs/nodejs-debugging https://www.andreasreiterer.at/set-up-vscode-debugger-react/ Debugger Sentence: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/debugger Command to launch debug mode in Server Side: node --inspect -r ts-node/register/transpile-only ./node_modules/.bin/frontity dev Access server inspector from Chrome: chrome://inspect/#devices ---------- Learn more » Blog post: https://frontity.org/blog/debugging-frontity-sites/ » Website: https://frontity.org/ » Tutorial: https://tutorial.frontity.org/ » Docs / Guides: https://docs.frontity.org/ » API Reference: https://api.frontity.org/ » Learn: https://frontity.org/learn/ ---------- Connect » Community forum: https://community.frontity.org/ » Twitter: https://twitter.com/frontity If you like this project, please consider starring it on GitHub to show your support: https://github.com/frontity/frontity