NexTrace
NexTrace is a VS Code Extension that tracks network requests and collects console.log statements with file navigation built in for easy performance monitoring / debugging for your Next.js App.
Install / Use
/learn @oslabs-beta/NexTraceQuality Score
Category
Development & EngineeringSupported Platforms
README
Nextrace
<a id="readme-top"></a>
<!-- PROJECT SHIELDS --> <!-- *** I'm using markdown "reference style" links for readability. *** Reference links are enclosed in brackets [ ] instead of parentheses ( ). *** See the bottom of this document for the declaration of the reference variables *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. *** https://www.markdownguide.org/basic-syntax/#reference-style-links -->
About The Project
Nextrace is a HTTP Request Performance Monitoring tool that helps you to identify and troubleshoot performance bottlenecks in your Next.js app. All HTTP requests (server and client) from running your Next.js app are displayed in one place with their associated observability metrics along with intuitive visualizations of the data. All console.log statements are collected and displayed together with buttons that automatically navigate you to its respective file.
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- GETTING STARTED -->Getting Started
Prerequisites
First, install dependencies in your Next.js app:
npm install nextrace
Installation
Search for Nextrace in VSCode Extension Marketplace and click Install.
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- USAGE EXAMPLES -->Usage
1.) Click on NexTrace Logo <br> 2.) Click Choose File Button to select entry point to your Next.js application <br> 3.) Click Choose Root Button to select your app folder (note: this folder should not be your project folder as it contains node_modules containing a large number of files. Instead select your app folder containing the entry point of your application) <br> 4.) Click Start to start tracking your application's network requests <br>
<p align="center"><img src="./assets/demo1.0.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p> 5.) Click Logs to display additional panel for your console logs for easy file Navigation <br> 6.) When finished, click STOP. <br> 7.) Optional: Incase of any issues removing boiler plate code, select your file and root as you did on steps 2 & 3 and click Clean Files buttton to remove boiler plate code. <br> <p align="center"><img src="./assets/demo2.0.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p> <p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- CONTRIBUTING -->Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE.txt for more information.
Contact
Your Name - NexTrace10@gmail.com
Project Link: https://github.com/oslabs-beta/NexTrace
<p align="right">(<a href="#readme-top">back to top</a>)</p>Built With
NexTrace Contributors
Accelerated by OS Labs and devloped by Charles Dunlap, Connor Keyes, Simon Lin, & Jose Velasco.
