Live Edit and Spy-JS in Rider 2017.3
In the previous post of our series exploring WebStorm functionality in Rider, we looked at improvements in our Angular and Vue.js support, as well as added support for
This post is part of a series:
- General web development updates in Rider 2017.3
- Web framework updates in Rider 2017.3 – Angular, Vue.js, …
- Live Edit and Spy-JS in Rider 2017.3
- Web developer tools in Rider 2017.3: HTTP client and SVG editing
When debugging a web application in Rider, the Run/Debug configuration has an option to launch the browser and enable Live Edit. This will launch the web browser and navigate to a the URL of the application being debugged.
To run Spy-js, we will need node installed, after which we can create a Run/Debug configuration that targets either a remote URL or an application running on our local machine.
(Pro-tip: create a Compound Run/Debug configuration which starts both your web application as well as Spy-js)
When we launch our application, Spy-js runs a proxy server (which by default is being auto-configured as your system proxy server). In its tool window, we can see three panes:
- Event Stack (center) – Displays the stack tree for an event selected on the left. It also includes execution timings for function calls. And if the execution time shows in bue, it means that specific call is responsible for more than 50% of the execution time of the expanded stack level.
- Variables (right) – Any captured variables at the time of execution. Which makes Spy-js a tool for retro-active debugging, too! What was the value of this parameter when this specific function call was made?
We can also double-click events in the stack to open up the editor (Rider will respect minified code and try to use source maps). We can see execution times in there as well, and see which parts of the code were executed as part of the function.
What else is there?
In this series, we looked at two great web developer tools in Rider 2017.3: LiveEdit and Spy-JS. In our next post, we’ll cover two more tools: a new editor-based HTTP client and a preview panel for SVG editing.
Download Rider 2017.3 and give it a go! We’d love to hear your feedback!
Subscribe to Blog updates
Thanks, we've got you!
Another Look into the Future with Rider’s Predictive Debugger
In the 2023.2 release cycle, we’ve introduced the Predictive Debugger in ReSharper, which gives you predictions about code paths and variables beyond the current execution pointer. We’ve written extensively about its advantages compared to alternative debugging strategies like thorough thinking, log…
Visualize Entity Framework Relationships and Additional Query Analysis in ReSharper 2023.3
A lot of teams are using Entity Framework or EF Core to work with their database. As an Object-Relational Mapper (ORM), it bridges objects in code to a relational database model, so that as a developer you don’t have to worry too much about the actual database. We all know: that’s not entirely tr…
Automatically Analyze ASP.NET Core Performance With Dynamic Program Analysis
Slow web pages may make your users or customers abandon your web application, even before they’ve had a proper look at it. You’ve likely also been frustrated working with a web application that is slow to load. The good news is that the latest versions of ReSharper and JetBrains Rider’s Dynamic P…
OSS Power-Ups: MassTransit – Webinar Recording
The recording of our webinar, OSS Power-Ups: MassTransit, with Chris Patterson, is available. This was the thirteenth episode of our OSS Power-Ups series, where we put a spotlight on open-source .NET projects. Subscribe to our community newsletter to receive notifications about future webinars.…