Assume that I have two monitors assigned to my pc. Now I want to get the preview of a web site while coding it. Is there anyway to do this?
eg:- Do the coding from sublime text from a one monitor and the meantime watch the output from the Firefox web browser.
I have used live.js for this more than once. It can work either as a bookmarklet or embedded on your page, and it works in any browser as it's not an extension. Also requires no other software to work.
The downside is it that it will flood your developer tools with HEAD requests every second or so to determine when to reload things. That's the cost of not having to install external software.
You can use the LiveReload plugin for SublimeText. It listens for changes to your code files and updates them in the browser in real time.
Also, do not forget to add the respective browser extension. That should save you from adding any scripts into your page.
You could use yeoman ( with Grunt or Gulp depends on which generator you want to use ).
Related
When I write HTML, I have Google Chrome open on one side and VS Code on the other. Then when I save, I go to Chrome and reload the page. However, how do I make it so that when I save my code, the page automatically reloads in Chrome?
Use a live server. One such option is the Live Server VS Code extension. You could also use the live-server NPM package or the live-server PyPI package.
There are plenty of options out there, just pick the best one for your needs.
I wanted to use the Monaco Editor for my project and I want to run the server side languages like C# or node in my Monaco editor(https://github.com/Microsoft/monaco-editor/) which is a open source editor from Microsoft.
Here are few examples for that.
https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin
https://dotnet.microsoft.com/languages
If you see the the above examples you can see they are running c# with run button I wanted to implement same functionality.
I know that I need to install run time for particular language like C# and I have that in my local machine but still I am not able to run it.
Any help will be highly appreciated.
What you see there is not a Monaco feature and is up to you to implement. How you do that, will depend largely on the language you're trying to run.
The first example (and jsFiddle and CodePen and many others) simply displays an iframe to show the result. That iframe loads a file with a unique name that contains the HTML, CSS and JavaScript code entered in the editor. You can confirm that this is what they're doing, using Chrome Dev Tools.
If you're going to run a language like C#, know that you will need full control of your web server. The flow will be something like this:
The user presses the Run button.
You call a web service (that you must develop), passing it the C# code and anything else needed to build a working project (like dependencies).
The web service creates the project from those inputs, invokes the C# compiler, runs the resulting executable, and finally captures the output (both stdout and stderr) into string variables. Those strings are returned by the web service.
Back in the browser, you display the output from the web service.
This is very doable, but getting it to perform well when your volumes pick up will be a special problem.
I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.
Theres a few questions similar to this, so I'll try to be clear as possible.
We have an existing, fairly large and complex, GWT webgame I have been asked to make work offline. It has to be offline in pretty much the strictest sense.
Imagine we have been told to make it work off a CD Rom.
So installation is allowed, but we cant expect the users to go to a Chrome/Firefox store and install it from there. It would need to be off the disc.
Likewise, altering of the browsers start-up flags would be unreasonable to expect of users.
Ideally, it would be nice if they just clicked a HTML file for the start page and it opened in their browsers of choice.
We successfully got it working this way in Firefox by adding;
"<add-linker name='xsiframe' />"
To our gwt.xml settings. This seems to solve any security issues FF has with local file access.
However, this does not solve the problem for Chrome.
The main game starts up, but various file requests are blocked due to security issues like these;
XMLHttpRequest cannot load file:///E:/Game%20projects/[Thorn]%20Game/ThornGame/text/messages_en.properties. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.MyApplication-0.js:34053 com_google_gwt_http_client_RequestBuilder_$doSend__Lcom_google_gwt_http_client_RequestBuilder_2Ljava_lang_String_2Lcom_google_gwt_http_client_RequestCallback_2Lcom_google_gwt_http_client_Request_2 MyApplication-0.js:34053
Now I was aware same origin policy issues might popup as during development we often tested locally using flags in chrome to bi-pass them.
Thing is...now I dont know how to get around them when we cant use startup flags.
Obviously in the example given its just the .properties file GWT uses to get some language related text. I could dump that inline in one way or another.
However, its only one of many,many,many files being blocked.
The whole game was made to run off *.txt game scripts on the sever - to allow easy updating by non-coders. Really the actual GWT code is just an "engine" and all the XMLHttpRequested files supply the actual "game".
These files are of various types; csv, txt, ntlist, jam.
The last two being custom extensions for what are really just txt files.
All these files are blocked by chromes security. It seems from what I can make out only images are allowed to be accessed locally.
Having all these files compiled in would just be impossible, as they are not fixed in number (ie, one central .txt file determains various scene .txt files which in turn determain various object files and directory's...).
Putting all this into a bundle would be nightmare to create and maintain.
So in essence I need some way to supply a offline version of a GWT project that can access a large number of various files in its subdirectories without security issues.
So far all I can think of is;
A) Theres something I can tell chrome via html or gwt that allows these files to be read in Chrome like FF can. (I suspect this isn't possible).
An alternative to XMLHttpRequest maybe?
B) I need to somehow package a game+a webbrowser in a executable package that has permission to access files in its directory's. (http://www.appcelerator.com/titanium ? ?? ).
C) I need to package and have the user run a full webserver that can then deliver all these files in a XMLHttp accessible way.
D) Bit of a funny one...we cant tell the user to add flags to browser start up...but Maybe I could write a game installer which just detects if they have Chrome or Firefox. It then opens up the games html in their browser with the correct flags for them? This would open up security issues if they browse elsewhere with that instance though, so Id presumably need other flags to disable the url bar if that's possible.
I am happy to make various changes to our code to achieve any of this - but as mentioned above theres no way to determain all the files needing to be accessed at compile time.
And finally, of course, it all has to be as easy as possible for the end user.
Ideally just clicking a html file, or installing something no more complex then a standard windows program.
Thanks for reading this rather long explanation, any pointers and ideas would be very welcome. I especially will appreciate multiple different options or feedback from anyone that's done this.
========================================
I accepted the suggestion to use Chromiumembedded below.
This works and does what I need (and much much more)
To help others that might want to use it, I specifically made two critical changes to the example project;
Because CEF needs a absolute path to the web apps local html, I wrote a c++ function to get the directory the .exe was launched from. This was a platform specific implementation, so if supporting a few OS's (which CEF does) be sure to write dedicated code for each.
Because my webapp will make use of local files, I enabled the Chrome flag for this by changing the browser settings;
browser_settings.file_access_from_file_urls = STATE_ENABLED;
These two changes were enough to get my app working, but it is obviously the bare minimum to make a application. Hopefully my finding will help others.
I'd suggest going the wrapper route. That is, provide a minimal browser implementation that opens your files directly. Options are Chromium Embedded[1]. If the nature of the application absolutely requires the files to be served as non-file urls then bundle a minimal webserver, have the on-disk executable start the server and open the bundled browser with whatever startup arguments you want.
[1] https://bitbucket.org/chromiumembedded/cef
I'm using Google Chrome Developers tool and console while developing and debugging my web applications.
I've some Chrome plugins/extensions installed. These plugins/extensions add extra markups and scripts in the pages while rendering them in the browser, and when I view my codes in the developers tool, makes it a lot messy.
I want a clean way to view my codes without those extra markups.
So is there a way to toggle (disable/enable) the plugins quickly, or in the best way, to disable them in a particular tab? I've several plugins/extensions installed and I don't think it's a good idea to disable and then re-enable them manually.
Besides, I may want to use a plugin/extension while I'm browsing other websites on other tabs simultaneously.
There's no mechanism to disable an extension for a specific tab, or specific host. You could hack something together via the management API that would disable extensions when you hit a specific URL, but that disabled state would be global, not local.
Extensions don't, however, run in Incognito mode (unless you explicitly whitelist them via a checkbox at chrome://extensions): that might be a decent workaround for you. Load your in-development site in Incognito, work with it there in a clean environment, and pop back into your regular window for normal browsing.
You could, of course, accomplish the same thing by setting up a specific profile for development in which you simply didn't install extensions.
These are workarounds, of course. You should feel free to file a feature request for more granular user-side control over when extensions are loaded: http://new.crbug.com/
Would running 2 separate instances of Chrome be of help for you?
(You can start 2 unrelated Chrome browser instances from a command line specifying different user directories: chrome --user-data-dir=userdata1 & chrome --user-data-dir=userdata2 )
I haven't tried it for your usecase, but it sounds reasonable.