testing-and-debugging

Check if data is refreshing by inspecting the browser console for Vue errors, verifying the API endpoint responds with fresh data using curl, and confirming the backend service is running. Review Flask logs for failed requests and validate that Pandas data processing completed without errors.

API errors typically stem from backend service failures, incorrect request formatting, or data processing issues. Check Flask logs for stack traces, verify the service is listening on the correct port with lsof, test the endpoint directly with curl, and inspect Pandas operations for data validation failures.

Chart display issues usually involve container sizing, data structure mismatches, or missing dependencies. Check the browser console for ECharts errors, verify the chart container has explicit dimensions, inspect the data structure passed to the chart component, and confirm the API is returning the expected format.

Yes. This skill covers all three layers with problem-layer identification to categorize issues as frontend, backend, or integration. Use browser console for Vue, backend.log for Flask, and command-line verification for Pandas operations to pinpoint and fix problems across your stack.

Start by checking the browser console for client-side errors and network requests. If data loads but doesn't display, the issue is frontend. If the network request fails or returns incorrect data, inspect Flask logs and verify the backend service status with ps aux and lsof.

Filters fail when frontend state doesn't sync with backend, API parameters are malformed, or Pandas query logic has errors. Verify filter parameters are sent correctly in network requests, check Flask logs for query execution errors, and test the filtered API endpoint with curl to isolate the problem.