Troubleshooting & Debugging
Logging and Tracing
Log Game State: Use
console.log()or a logging library to track the current state of the game. This can help identify issues related to game logic, player actions, or data inconsistencies.// presenter-app/src/controllers/GameController.ts class _GameController { // ... finishGame(game: Game) { console.log("Finishing game:", game); // Log game state before finishing // ... } // ... }Inspect Objects: Use
console.dir()to inspect objects in detail, revealing their properties and values. This is useful for understanding complex data structures or object relationships.// presenter-app/src/routes/game/q/questionDetails.tsx private onShowQuestion(): void { // ... let question = QuestionController.getQuestion(game.id, questionIdx, difficulty); console.dir(question); // Inspect the question object // ... }Trace Function Calls: Use
console.trace()to output a stack trace of function calls, helping identify the flow of execution and pinpoint the source of errors.// presenter-app/src/controllers/PrizeController.ts class _PrizeController { // ... getPrize(gameId: string, difficulty: number): Prize { console.trace("Getting prize for gameId:", gameId, "difficulty:", difficulty); // Trace function calls // ... } // ... }
Breakpoints and Debugging Tools
Browser Developer Tools: Use the built-in debugger in your browser’s developer tools to step through code execution, inspect variables, and identify errors.
Debugging Libraries: Consider using a debugging library for more advanced features like conditional breakpoints, logging levels, and step-by-step execution.
Unit Testing and Code Coverage
Unit Tests: Write unit tests to verify the behavior of individual components and functions. This helps catch bugs early in the development cycle and ensure that code changes do not introduce regressions.
// presenter-app/tests/controllers/GameController.test.tsx describe("GameController", () => { // ... describe("getPrizesWon()", () => { // ... it("returns threshold prizes for 5th question incorrect", () => { // ... }); // ... }); // ... });Code Coverage: Use tools like Jest’s code coverage reporting to identify parts of your codebase that are not being tested. This helps ensure that your tests are comprehensive and that you are covering all possible scenarios.
Best Practices
Modular Code: Structure your code into well-defined modules or components to improve code readability and maintainability. This also makes it easier to isolate and debug issues.
// presenter-app/src/components/askQuestion.scss .c-ask-question { // ... .answers { // ... li { // ... label { // ... .answer-text { // ... } // ... } // ... } // ... } // ... }Descriptive Naming: Use clear and meaningful variable names, function names, and component names to make your code easier to understand and debug.
// presenter-app/src/routes/game/q/questionDetails.tsx private onShowQuestion(): void { // ... let question = QuestionController.getQuestion(game.id, questionIdx, difficulty); // ... }Error Handling: Implement robust error handling to catch and gracefully handle unexpected situations. This helps prevent crashes and provides valuable information for debugging.
// presenter-app/src/controllers/QuestionController.ts class _QuestionController { // ... getQuestion(gameId: string, questionIdx: number, difficulty: 0 | 1 | 2 | 3 | 4 | 9): Question { // ... if (!question) { throw new Error(`No questions remaining for difficulty ${difficulty}.`); } // ... } // ... }
## Top-Level Directory Explanations
<a class='local-link directory-link' data-ref="audience-app/" href="#audience-app/">audience-app/</a> - This directory contains the files for the audience-facing part of the application. It includes HTML files for different pages, static assets like images, and configuration files for Firebase and npm.
<a class='local-link directory-link' data-ref="audience-app/public/" href="#audience-app/public/">audience-app/public/</a> - This subdirectory holds the publicly accessible files of the audience app. It includes HTML files for specific pages, images, and other static assets.
<a class='local-link directory-link' data-ref="presenter-app/" href="#presenter-app/">presenter-app/</a> - This directory contains the files for the presenter-facing part of the application. It includes source code, static assets, and configuration files.
<a class='local-link directory-link' data-ref="presenter-app/build/" href="#presenter-app/build/">presenter-app/build/</a> - This subdirectory holds the compiled and bundled files for the presenter app. It includes HTML, CSS, JavaScript, and image files.
<a class='local-link directory-link' data-ref="presenter-app/src/" href="#presenter-app/src/">presenter-app/src/</a> - This subdirectory contains the source code for the presenter app. It includes components, controllers, routes, styles, and utility functions.
<a class='local-link directory-link' data-ref="presenter-app/tests/" href="#presenter-app/tests/">presenter-app/tests/</a> - This subdirectory contains test files for the presenter app. It includes mocks, controllers, and declarations.
