So I have a pretty big application with a lot of imports. Third party js libraries and a lot of angular code.
Now I glued them all together with wro4j into two big files that are compressed.
The order in which I did it is correct as the application works as intended. But often times when I press F5 to reload the page, stuff will break. JS console will start throwing errors and some style settings get lost on the page. But at the same time when I look at the source code, everything is still there. Angular tells about missing modules that are all there and the css that is broken... well the correct css is also in one file and correctly loaded into the page source code.
Has anyone experienced something like this? How would you debug this?
Related
Currently Jest in my VSCode uses the --watch parameter (I use the Orta.vscode-jest extension), which mean when I save a file, it will run all tests in uncommitted files.
It's a good default behavior but sometimes my upcoming commit may imply multiple files and I don't want to waste 75% of my time and resources on tests I don't to focus on.
After reading documentation, I found I can turn off the auto-run (see arrow below), so now when saving nothing happens, and I was expecting a way to trigger manually the test I want.
Unfortunately once done it's like if the extension was totally shut down. See below, I have no longer the ability to run tests through the extension.
Do you know a way to solve this? Keeping icon buttons to trigger manually specific tests?
I saw some homemade solution https://stackoverflow.com/a/55279902/3608410 (see Running a selected Jest test in Visual Studio Code) but I feel it's weird since we have a powerful extension already installed.
(maybe I missed something...)
Thank you,
Didn't see that before but if doing a right click in the test file where needed, in the menu I'm able to run a specific test, handy!
I am working on a project using Angular2 and I would like the IDE to provide me with code hints as I write my code.
I have enabled node_modules as a library and I can get code completion suggestions but the dropdown contains multiple times the same function names like the image below.
What do I need to do to fix this?
I have an idea for a useful tool but I have no idea where to start. (I apologize for the vague nature of the question, but I do think it can be answered in a specific way and therefore is appropriate for SO.)
Here's what I'm after in a nutshell: a Chrome extension that darkens/shades the whole viewport except for the "current" line, i.e. the line you're reading. (I explain momentarily how the "current" line is determined.)
Pretend the line outlined in red is the highlighted line and everything above and below is grayed out. (My mockup sucks but I'm working with limited tools right now.)
When the page loads and you turn on the extension, the "current" line is the first line of paragraph text. To go to the next line, press the down arrow. Ideally, your highlighted line is in the exact middle and the rest of the page "slides underneath" to the extent that it can so your eyes don't have to move.
So here's my question: if you knew HTML/CSS/JavaScript well enough but you'd never written a browser extension, where and how would you start this? Do a plain JS POC first? Build the POC as an extension?
To be clear, this isn't a "plz how i write ecomerce site" question where I'm asking you to spoon feed me the whole thing. I'm just asking what you'd do as the first step. I realize this is a non-trivial undertaking. Thanks in advance.
If you know HTML/CSS/Javascript well enough to get the effect you after, then getting started with a Chrome extension shouldn't be hard. Just read the Chrome extension developer documentation. There are loads of example extensions as well.
You basically need to make a package directory, containing a manifest.json, and specifying a single "content script" which would contain all your code.
It could make sense to start out developing based on a bookmarklet that injects a script tag (with file:///path/to/yourscript.js) because I think that would be slightly faster wrt loading new code, resulting in a slightly faster development cycle. You could also set up a dummy page to always include this particular script tag so you only have to reload that page to see your change. Even fancier: Use http://livereload.com/
Otherwise you need to instruct chrome to reload the extension manually after each change in your code.
You may like to use Extensions Reloader for easier reloads.
I like the idea by the way!
This is just one of those things I've put up with ages, but I'd be interested to see if anyone has got a solution to the problem.
At some point during the day (there doesn't seem to be a pattern to it), when I rebuild my application after saving it, the changes will not be evident when testing in the browser. The only way to get them to show up is to issue a "tell http restart" on the server console or to restart the Designer client (which seems to issue a heavier rebuild command somewhere along the line).
Cleaning the project doesn't work either.
It's really just an annoyance, but one I'd love to be able to get rid of.
When it happens to me I remove all compiled stuff from Local->xsp and WebContent->WEB-INF->classes using Navigator view.
Then I run Project->Clean. This helps often.
Restaring designer from time to time is also inevitable :)
Recently I decided to write a very simple Google Chrome extension. All it's going to do is to hide some DOM-elements from the web-page using JavaScript when user presses the extension's button.
Since I knew nothing about Chrome extensions, I started reading tutorials, and I came across this Google's sample: A browser action with no icon that makes the page red
This sample is really close to what I want to make. The problem is that I can't make it work. Whenever I load the extension in Chrome, I can see the button of this extension, but when I press it - nothing happens. Sample doesn't work, probably I should know something I don't know yet.
And before you started asking me:
Yes, I tried restarting the browser;
I use the newest version of Chrome.
Thanks for help.
If you open up the sample zip... find backgrond.js... edit.
Find the line that says:
null, {code:"document.body.style.background='red !important'"});
and remove the "!important". so it should read:
null, {code:"document.body.style.background='red'"});
That is it. just save and reload the extension, should work (unless the page has an !important flag set to the background).
I am afraid I don't know why the "!important" tag doesn't work but I have never been able to get it to work in an extension. Hopefully someone else here will be able to give an explanation and maybe a work around.
I think I can help bring some clarification to the "!important" override attribute causing the extension to break. Though I am not 100% I believe that this attribute is not allowed for issues involving security complications. I have a link to another SO thread that may help clarify this as well.
My CSS is not getting injected through my content script
I'm assuming from reading this article that you must either use the !important override when content scripts specified in the manifest file. Otherwise if the css is being injected !important is not required. Again not 100% on this.