Recall what we saw earlier in the first section: when an HTML file you are working with is being displayed by your browser and a change has just been made to the file, you will have to manually refresh the page in your browser for the displayed content to be updated.

LiveEdit is a PyCharm feature that updates the web page for you automatically every time there is a change to the source code. This is quite a useful feature, as it will save web developers significant time, not having to manually reload a web page. It is also important to note that LiveEdit can only be utilized during a debugging session.

With that said, LiveEdit does not come with PyCharm by default, but it is a free plugin developed by JetBrains that can be installed free of charge. Note that we will go into the details regarding PyCharm plugins in Chapter 14, More Possibilities with PyCharm Plugins, and for now we will only consider the process of installing LiveEdit specifically:

1. Go to the PyCharm settings and navigate to the Plugins tab. You should see the following window:

2. Note the three tabs available in this window, highlighted in the preceding screenshot: we are currently in the Installed tab. Since LiveEdit is not installed by default, we will have to navigate to the Marketplace tab.

3. In the Marketplace tab, you will see various plugins that you can install for your PyCharm. Type in LiveEdit (no spaces) in the search bar, and choose the option LiveEdit by JetBrains, as illustrated here:

4. Click on the Install button in the next window to install LiveEdit. You might also have to restart your PyCharm for the plugin to activate.
5. After the restart, you can further customize the behavior of LiveEdit. From the settings, go to Build, Execution, Deployment | Debugger | Live Edit, and you will see this window:

The options are relatively self-explanatory, and the default selections are generally optimal for most web development projects:

• If you are working with a Node.js application within PyCharm, you could potentially enable the corresponding setting as well.
• By default, LiveEdit will only update the displayed web page when changes in HTML and CSS are made, but not JS—this is because changes in JS might require a complete restart of a given web application. However, you still have the option to apply LiveEdit to JS in this setting window.

With that, you are ready to utilize LiveEdit in your web applications. Within the current repository folder, start a debugging session with the sample.html file, or any HTML file you are interested in, to see LiveEdit in action.