PhpStorm is shipped with a predefined list of most popular browsers that you may install and launch automatically from the IDE during running, debugging, or previewing the output of an HTML file. PhpStorm presumes that you install browsers according to a standard procedure and assigns each installation an alias which stands for the default path to the browser's executable file or macOS application. In addition to the browsers from the default list, you can configure custom browser installations.
PHPStorm, Xdebug and Google Chrome debugging. Ask Question Asked 5 years, 11 months ago. Active 4 years, 10 months ago. Viewed 11k times 11. I spent all day on this and still cannot get the debugger to work in PHPStorm with Google Chrome. These are the steps I took insofar: 1) Locate xdebug extension after installation. Yes, it does not work with Google Chrome 67.0.3396.87 with Sublime 3, provided that the setting within the extension 'Allow access to file URLs' is enabled. I have tried multiple times to reset the settings within Sublime 3, to restart the extension etc and still no result.
- Open the debug monitor in phpstorm, that is, the phone button, and then click the green debug crawler button before the code breakpoint. Chrome browser opens the Xdebug page, and phpstorm displays the debug window The figure below shows that your configuration is successful.
- Both WebStorm 2.0 and PhpStorm 2.0 allow you to debug JavaScript code while running it in Mozilla Firefox (including Firefox 4). In WebStorm 2.1 and PhpStorm 2.1, which are currently in early production access, you can also choose to debug JavaScript in Google Chrome. Debugger for Chrome supports all features of JavaScript debugger for Firefox.
- The Xdebug helper extension for Chrome. To use it, you must enable it in Chrome and then you must go in PHPStorm, File-Settings-Languages&Frameworks-PHP-Debug and there under the Xdebug. What this extension will do is, it will append the end of each url with /?XDEBUGSESSIONSTART=PHPSTORM.
PhpStorm has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure. See Built-in web server for details.
Open a file in a web browser
To open a file that is intended to be rendered by a web browser (HTML, XML, JSP, and so on), do one of the following:
Press Alt+F2.
Right-click a file and select Open in Browser.
From the main menu, select View | Open in Browser.
Use the browser popup in the top right part of the editor window. Click the browser button to open the web server file URL, or Shift+Click it to open the local file URL.
The Open in Browser action is not available for other file types. However, you can still execute it using Find ActionCtrl+Shift+A.
By default, PhpStorm supports some of the most popular browsers, which are configured automatically, if available:
Chrome
Firefox
Safari
Opera
Internet Explorer
Edge
View and configure the list of browsers
In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | Web Browsers.
If a browser was installed using a standard procedure, the alias in the Path field should point to the right location. If it does not, specify the path to the corresponding executable file.
The order of browsers in the list corresponds to their order in the popup, context menu, and the View menu. If you disable a browser, it will not appear in the popup, context menu, and the View menu.
Add a custom browser
In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | Web Browsers.
Click and specify the browser name, family, and location of the executable file or macOS application.
Select a default browser
The Open in Browser item in the View menu and in the context menu of a file lists all available browsers and the default browser, which is also used to render external resources.
In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | Web Browsers.
From the Default Browser list, choose one of the following:
System default: use the default browser for your operating system.
First listed: use the first browser in the list.
Custom path: use a browser that is not in the list. Specify the location of the executable file.
Use custom profile and settings
You can configure custom profiles for Firefox and Chrome family browsers.
In the Settings/Preferences dialog Ctrl+Alt+S, select Tools | Web Browsers.
Select the browser in the list and click .
For Firefox, specify the path to the profiles.ini file and choose the profile to use. For more information, see Firefox browser profile.
For Chrome, select Use custom user data directory and specify the location of the user data directory.
You can also specify additional command-line options to use when running Chrome from PhpStorm. For more information, open
chrome://flagsin the Chrome address bar.
Both WebStorm 2.0 and PhpStorm 2.0 allow you to debug JavaScript code while running it in Mozilla Firefox (including Firefox 4).
In WebStorm 2.1 and PhpStorm 2.1, which are currently in early production access, you can also choose to debug JavaScript in Google Chrome.
Phpstorm Chrome Javascript Debug
Debugger for Chrome supports all features of JavaScript debugger for Firefox. You can set breakpoints, inspect local variables, evaluate expressions and more:
If you use Chrome for web browsing and want to debug in it simultaneously, you can configure WebStorm or PhpStorm to use a separate Chrome user profile in ‘IDE Settings | Web Browsers | Chrome‘:
To configure the default debugging browser, just edit the ‘JavaScript Debug’ configuration in the ‘Defaults’ section.
Download WebStorm/PhpStorm EAP, try the new JS debugger and let us know what you think.
Phpstorm Chrome Extension
Develop with pleasure!
-JetBrains Web IDE Team