How does one set IntelliJ breakpoints in Angular HTML files? - intellij-idea

In chrome it's possible to set breakpoints in the Angular component html files. How does one do this in IntelliJ?
Please note that following other posts about how to configure IntelliJ to debug Angular do not address this question, I can debug .ts files just fine, but IntelliJ does not let you set breakpoints in html files even with the webpack source mapping.

Related

Can I deploy a file on change inside PhpStorm?

I am using PhpStorm as my IDE and configured Sass to compile into my css file for my WordPress site. I have set up auto upload, which works on the file I am working on but not my style.css as my node watcher is updating it, not me.
Any ideas or solutions?

VSCode does not show HTML attributes in .vue files but shows in html files

I have spent 3 hours figuring out what's going on but could not find it out. I am new to HTML and intellisense help me know many attributes of a tag on the go. However, with .vue files html attributes are not being shown up.
a) Attributes being shown up in "index.html"
b) No attributes hints in "TodoItem.vue"
I have already installed Vetur, HTML CSS Support and Vue VSCode Snippets extension from marketplace.
First, install Vetur extension after that go to
File > Preferences > Settings
In the list find and open Extensions find Vetur, scroll down and find Template Interpolation Service (must be checked).
I found it.
you need to install this official extension to get tailwind css hints.
Tailwind CSS IntelliSense
everything will come true

vs code autocomplete other

I'm wondering how to get VS Code to autocomplete HTML tags in files that aren't .html
I'm working on a vue.js project which have a pages HTML, JavaScript, and CSS all in one file that have a .vue extension.
Just add the Vetur extension and you get emmet and auto completion out of the box.
Features
Syntax-highlighting
Snippet
Emmet
Linting / Error Checking
Formatting
Auto Completion
Debugging
https://marketplace.visualstudio.com/items?itemName=octref.vetur

How to automatically minify html files in PhpStorm/ WebStorm?

For CSS files I have created a file watcher like described in this manual. Also for JS files, see manual, which both uses the YUI Compressor
But I didn't find how to add file watchers, which minify html files (e.g. removing comments, ..). How can I automatically minify html files with PhpStorm?
I'd suggest looking at HTMLMinifier - it has CLI and thus can be set up as a file watcher, also it can be configured as Grunt task or Gulp task and executed using Grant/Gulp console

Breakpoints in Dartium not working

So if I add break points in .dart files that are located in /web directory of my project, it works fine. For example I'm using AngularDart and the main.dart file works. However when I try to put a breakpoint in anything in the /lib directory, Dartium doesn't stop on them.
How can I get the breakpoints in Dartium to work with the /lib directory?
Note that I've tried putting breakpoints with Dart Editor, IntelliJ with Dart Plugin and also directly in Dartium and nothing works. Is this intended?
To set breakpoints in dependencies search the source inside the (no domain) node and set the breakpoint there. Breakpoints don't hit when set somewhere in the packages node.
You can also use the breakpoint statement for the debugger top pop up. See Does Dart have a 'breakpoint' statement? for more details.
I will combine the accepted answer + comment to that answer. Breakpoints 100% works only when you set them for files inside (no domain) category on Sources tab.
As I understand, in category with your domain name they are working only for files that was included with <script> tag. They won't work for imported files.
I have created an issue: Dartium ignores breakpoints set not in (no domain) category.
If you set break pointors from Dart Editor, then you should run your application from Dart Editor.
If you're using Dartium only, then you should set break pointors from Chrome Developer Tool. (Accepted answer)