-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Debug frontend code
As part of Oppia's build process, the frontend code gets bundled and (in prod mode) minified. This build process can complicate debugging, but here we will describe some strategies to help you diagnose problems in the frontend code.
The Chrome developer tools are invaluable for debugging. You can load them by clicking on the three dots in the upper-right of the browser window, then selecting "More Tools," and finally selecting "Developer Tools" like this:
You should see the developer tools open:
Note that these tools work on any website, not just your local development server. For example, in the screenshot above we have https://oppia.org open. This means you can use the developer tools to compare the Oppia app you are running locally to what is currently running in production.
The "Elements" tab of the developer tools lets you inspect the HTML and CSS of a page.
-
Click on the element selector button in the upper-left of the developer tools:
-
Now when you hover over elements on the page, you'll see colored boxes that indicate the element boundaries, padding, border, and margins. You'll also see the HTML for that element highlighted in the debugging tools. For example, here we are inspecting the "Browse our lessons" button:
If we click on the element, we that on the right, the "Styles" sub-tab shows the CSS describing the inspected element:
We can also view sizing information by clicking on the "Computed" sub-tab:
In the "Console" tab, you can run JavaScript code to interact with the page. For example, here we use the HTML class oppia-splash-button-browse
to select some buttons on the page and print the first one's text:
Notice that in the screenshot above, we are hovering over the HTML returned by $('.oppia-splash-button-browse')[0]
, which is why the associated element on the page is highlighted.
This tab is also where you'll see the output from console.log()
, console.error()
, or other print statements.
If you select webpack://
in the sidebar of the sources tab, you can see Oppia's frontend code:
However, here you are seeing the code that has been altered by the build process. To see the original source code, you need to enable source maps when running the development server like this:
Python:
python -m scripts.start --source_maps
python -m scripts.run_e2e_tests --prod_env --source_maps
Docker:
make run-devserver source_maps=true
make run_tests.e2e PYTHON_ARGS="--prod_env --source_maps"
When generated, source maps will automatically be available through the Chrome debugger:
Have an idea for how to improve the wiki? Please help make our documentation better by following our instructions for contributing to the wiki.
Core documentation
Developing Oppia
- FAQs
- How to get help
- Getting started with the project
- How the codebase is organized
- Making your first PR
- Debugging
- Testing
- Codebase policies and processes
- Guidelines for launching new features
- Guidelines for making an urgent fix (hotfix)
- Testing jobs and other features on production
- Guidelines for Developers with Write Access to oppia/oppia
- Release schedule and other information
- Revert and Regression Policy
- Privacy aware programming
- Code review:
- Project organization:
- QA Testing:
- Design docs:
- Team-Specific Guides
- LaCE/CD:
- Developer Workflow:
Developer Reference
- Oppiabot
- Git cheat sheet
- Frontend
- Backend
- Backend Type Annotations
- Writing state migrations
- Calculating statistics
- Storage models
- Coding for speed in GAE
- Adding a new page
- Adding static assets
- Wipeout Implementation
- Notes on NDB Datastore transactions
- How to handle merging of change lists for exploration properties
- Instructions for editing roles or actions
- Protocol buffers
- Webpack
- Third-party libraries
- Extension frameworks
- Oppia-ml Extension
- Mobile development
- Performance testing
- Build process
- Best practices for leading Oppia teams
- Past Events