CSS autocomplete for PhpStorm 2021.1 - phpstorm

I'm using PhpStorm 2021.1 on Mac.
I'm having a problem getting my CSS to give suggestions for class names. I have the CSS file stored locally (no CDN) and it's not auto-completing my CSS when I link my style sheet.
Where do I need set on the Mac version, because I don't have this problem on my Windows machine?

Related

file not found error in chrome for html code

I have been trying to open html file from my desktop folder using chrome. It shows file_not_found it may be deleted or moved. But same is getting open in Edge browser. I'm using windows 10. code written in VS Code editor. Need help. I'm a beginner in programming language.
Install a live-server extension in VS code then you can serve your page from there
You can download from the extensions tab by searching live Server by ritwickdey or
use this link https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Chrome does not seem to read CSS files fully

I have a CSS file that has more than 300 lines. A number of html and PHP files use this CSS as external stylesheet and all this works fine if opened from my local drive.
However, once installed on the remote web server, entries after the 300th line in the CSS file do not take effect. This issue occurs only on Google Chrome (Version 52.0.2743.116) and not in IE, Edge or Firefox browsers. The workaround is to adopt internal / inline styling for the specific ids and classes in each of the html/php files.
While I have reported the issue to Google, I would appreciate any suggestions to resolve this issue from the developers' end. Thanks.

Chrome Dev Tools: Mapped link disappears after rule is edited in Inspector Styles pane

I am using Chrome Dev Tools to work with my LESS generated CSS.
My source maps are working correctly and I can see the name and line number of the source file next to the rule in the Styles pane of the element inspector.
Once I make a change in the inspector, the name/link to the source file disappears. Why is this?
This is frustrating as I have my dev tools set up to edit the source files in Chrome (in the Source pane). After checking the change in the inspector, I want to easily jump to the source file to make the change there.
Update
I am running Chrome on Ubuntu 12.04 in a VM. On my host (Ubuntu 14.04), instead of the link to the file disappearing, it is replaced with the link to the compiled CSS file.

Chrome Developer Tools CSS lines and stylesheet name not displaying

In Developer Tools in Google Chrome when i inspect an element in a page locally hosted on my pc , in the styles window the stylesheet:line-number is not showing. Example style.css:127 ...
What's the problem?
Thanks :)
I just discovered this problem as well. The folder name on the local server contained a space. When I renamed the folder (used a hyphen instead of the space) the stylesheet filename and line numbers came up Developer Tools again.

Netbeans with Chrome integration on HTML5 project

I have successfully installed both netbeans and the chrome extension for doing html/css/js work. It appears to work for the most part but I've seen some questionable activity that is... "limiting".
Netbeans > Chrome seems like a fragile interaction. In netbeans, I select run file, and the page opens in chrome always in a new window (is that right?). Part of the marketing here is that you're supposed to be able to edit the css without having to constantly go to the browser and reload. But in netbeans, when I go to the tab of the css file (in the same project), the chrome page bombs with the Dead Folder icon and the text "Something went wrong while displaying this webpage".
What's supposed to be the process here? It seems to work in principle, but not in practice.
[update]
I had also had the addon problem that if I did Run Main Project while looking at the css file, it would show the css file as if it were the main html file. After setting chrome as the default browser, this action shows the actual main html file. At that point, making any change to the css file, any typing at all, will bomb the chrome page.
Take a look at this tutorial.
Once you run a page/project in Chrome with NetBeans integration, in NetBeans there is a window CSS Styles and slightly different Navigator (in 7.3). Now in browser you can start Inspect mode (for instance right click on NetBeans logo in omnibar and check "Inspect in NetBeans mode") and then you can for instance click on elements in browser and if you do that, the CSS Styles window in IDE shows all css properties and rules applied to selected element. You can edit CSS from either CSS Styles or by plain old editing of CSS file in NetBeans. In both cases, changes are visible in Chrome without any reload (without even saving the css file). And you can also use JavaScript debugger in NetBeans.
I don't know what do you mean by "chrome page bombs", but page cannot be debugged by 2 "debuggers" at the same time in Chrome - so you can either use NetBeans or Chrome Developer tools.
There are many new features in the upcoming NetBeans 7.4 (you can download 7.4 Beta from netbeans.org). You can try it as well.