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.
Related
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
I'm studying HTML/CSS and doing a single-page project using WebStorm and Chrome. Normally I test the way my page running Chrome in WebStorm which results in opening http://localhost:63342/ in my browser address line.
After I finished my project I closed WebStorm and ran it again in Chrome, but this time I open it by clicking on the shortcut on my desktop.
To my surprise, the way the page looks was different from the one that I saw when I opened Chrome through WebStorm.
The question is: Why so? It's the same HTML/CSS code, the same browser.
You can use http://brackets.io/ as an alternative. It has a similar feature called "live preview".
It seems that there is no style applied to your page. If you have your css in a separate file, my guess is that WebStorm doesn't locate your CSS file or you are not referencing it correctly in your html. Try looking at the "Sources" tab from the Chrome Developer Tools (F18) and see if it loaded the .css file.
It turned out that it had something to do with the page scale. When I press cmd and + and the page zooms in, it gets a slightly different look.
Visual Studio 2013 have feature called browser link but i can't make it automatically refresh browser when i save html file. And if i need to use hotkey of browser link then what is benefit of it? Because i can press F5 in browser instead press hotkey of browser link. But if it refresh automatically when html file is modified then it will be very handy.
So my question is, is it possible to automate browser link when html file is modified?
I don't think it is possible by default.
And if i need to use hotkey of browser link then what is benefit of it?
Browser Link is a new feature that creates a communication channel between the development environment and one or more web browsers. You can use Browser Link to refresh your web application in several browsers at once, which is useful for cross-browser testing.
That is refreshing several browsers at once seems to be the main functionality of this feature.
To reload a page every time you make a change to it try one of these:
Tincr - For Chrome.
Auto Reload - For firefox
I have tried many ways to get browser refresh to work with VS 2013, other IDEs and text editors. In my search I have found the one (in my option) that works best is live-server.
Very easy to install with node nmp
https://www.npmjs.com/package/live-server
npm install -g live-server
Here it is on GitHub https://github.com/tapio/live-server
So I'm running my Rails app on a Nitrous.io server, and Chrome's web inspector is displaying some weird behavior that I've never seen before. When I try and modify some CSS in the web inspector, it automatically switches back to the previous CSS and doesn't make any live changes. I've never experienced this before and rely heavily on web inspector to work on the CSS of my site.
I'm currently running Chrome OS v29.0.1547.74 on a stable build.
I would post my css file but it's pretty long. Any idea where I should start looking to debug this? I really need to be able to make live changes in the browser to work on this site.
My CSS passes the W3C CSS Validator, all I get are warnings for 'unknown vendor prefixes'.
I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.
To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.
Ideally, this would be:
in RubyMine itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...
...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
Thanks to #CrazyCoder & #LazyOne for the pointers...
After a bit more research, I've confirmed and gotten more detail:
The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007
Detailed Instructions
Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
Run Rubymine > Settings > Plugins (type "plugins" in the search
box in settings)
Click the Install Plugin from disk button at the bottom of the list
Navigate to where you downloaded the plugin and select/open it
Activate by checking it on the plugin list
(You will likely have to) restart RubyMine
Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
I believe there is also an extension for FireFox, which I believe ALSO DOES support
Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
(Launch) Debug your project
Edit as you normally would
Observations/Opinions
The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.
However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.