I believe that friends who have just installed the HBuilderX software do not know much about the debugging operation. Today, the editor has brought about the debugging operation process of HBuilderX. Friends in need, let’s learn it together!

Make simple settings to adjust it to a vertical screen style, and set other settings according to your own needs, such as setting the phone style, friend resolution, etc., to simulate the real phone to achieve the same effect.

Open hBuilder, find the run button, and click to connect; usually, the connection will not be successful, and some other settings need to be made, which requires the tools on hBuilder.

If the connection is successful, the connection page will appear. You can make changes while looking at the page, but there will be some problems during processing. There may be no changes when making changes. In this case, you need to double-click the button to reopen it for debugging.

Set the IP address of the built-in web server to your computer's address and port number to ensure that the port numbers do not conflict.

Write the code on the left, and the page will automatically refresh on the right when saving, which is very convenient for adjusting the interface. For precompiled languages ​​such as less and sass, after automatically outputting css after ctrl+s, the browser refresh will continue to be activated.

Right-click a div in the code and select "Highlight corresponding elements in the browser". You will see that the specified element in the browser on the right is highlighted.

Above, I have shared with you the detailed operation process of HBuilderX debugging. Friends in need should hurry up and read this article.