How are people setting up live browser preview of PHP pages in VSCode? I have multiple projects with local testing server/web roots like:
http://127.0.0.1/project1/
http://127.0.0.1/project2/
http://127.0.0.1/project2/
etc.....
I just want to simplify previewing dynamic pages for each project - does VSCode support this natively or does it require an extension?
Related
Vega seems to intend to compile away both ... and =>. This is not supported in IE11 browser. Anything can be fixed to support IE11 browser?
We are using in angular 7 projects but it fails on module load for IE.
As described in Vega's Supporting Internet Explorer page, Vega does not directly support Internet Explorer. However, you can use a transpiler like Babel as part of your application build process to transform the resulting code and target a wider range of browsers / platforms.
I used angular-cli#1.0.0-beta.10 before and now I updated to angular-cli#webpack beta.11. After a lot of custom changes I got it to work.
The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli#1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.
How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?
How to debug with angular/cli
The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.
But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.
(new) Solution for angular/cli#1.0.0-beta.26 and newer
Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1
Notice: In this example I used port 5321 instead of 4200. Just use your port.
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular/cli using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:
Set your Remote URL Path of your project directory to webpack://.
Set your Remote URL Path of your src directory to webpack://./src
(old) Solution for angular-cli#1.0.0-beta.10 - .14
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular-cli#webpack using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to
webpack:////Users/...FULL_PATH.. //on Mac OSX
or
webpack:///C:/...FULL_PATH.. //example on Windows
Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes
after "webpack:"
You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.
EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks #born2net
Have Fun.
ok got it working,
you need to map both root and src.
see here:
hopefully it helps someone,
let me add that sometimes the debugger will miss your breakpoint so add alert('foo') or ;debugger code just before your breakpoint.
tx
will be adding and convering jspm projects to new cli
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source# https://github.com/born2net/ng2Boilerplate
Regards,
Sean
2017 answer for:
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
If you are having problems with this, go to your Scripts tab in your debugger and try and align your URL mappings according to what you see.
None of the other answers helped me because my version of angular-cli mapped things a different way.
What finally helped me was to add an additional / (forward slash) after webpack:///, so that there are 4 instead of 3. By default there were 3 forward slashes
The remote URL points to the same parent directory as on the left except the webpack://// schema.
Also you don't need to enable the TS compiler as often suggested.
MacOS
Angular-CLI 2.4.1
WebStorm 2016.3
You can use Augury which is a dev tool extension for the web browsers in order to debug angular applications.
Here is the link you could install:
https://augury.angular.io/
This tool is very useful in viewing the hierarchy of your routing in your application, Module and Components hierarchy and the Dependency Injection overview on each component.
Here is an Inject Graph of my project which illustrate my above explanation:
Please note that the above solutions do NOT let you set breakpoints in the html files of angular components when using IntelliJ. You can only do this in Chrome. I don't understand why this is not possible in IntelliJ.
I'm using bootstrap with flat-ui. Glyphs is displaying correctly if bootstrap and flat-ui files are on the same directory as the site. But when I transfer these files to a different directory and just point the files there from the site (with a different directory), the glyphs are just displaying "E024".
site directory:
/var/www/html/tn
bootstrap/flat-ui directory:
/var/www/html/fui
I have read this Bootstrap 3 unable to display glyphicon properly
Actually the glyphs are displaying correctly on other browsers other than firefox in win7.
but that didn't help. any idea?
I had the same issue with Firefox. In my case, I was loading a bootstrap 3 based HTML5 web application from the local file system, not from a web server. Apparently Firefox has security settings with this and local fonts - see this other answer:
CSS #font-face not working with Firefox, but working with Chrome and IE
In short, for me I was able to fix this in Firefox by changing the preference security.fileuri.strict_origin_policy to false.
I've built myself a small Sencha Touch 2 app, so now i'm trying to make it smaller/minify it
My app looks like
/touch
/app.js
/resources
/ux
/app
/app.json
/index.html
/build.xml
So I was trying to make it more efficient & faster to load so I loaded up Sencha Cmd and ran
sencha compile --classpath=app,touch/src,ux include -all
So it does what looks like compiling it, without giving any errors, it gives a few warnings but those are ok. So it finishes up and nothings changed. The directories are exactly as there were before.
How would I use this correctly to make my app smaller & load faster?
The command
sencha app build package
or
sencha app build production
Will minify/package your application. All of the javascript will be contained in a single app.js file, and the javascript+css will be minified. More information about these commands can be found here: http://docs.sencha.com/touch/2-1/#!/guide/command_app
See Also cmd tool doc for detailed info:
http://docs.sencha.com/cmd/3.1.2/#!/guide/command_app_touch-section-deploying-your-application
Deploying your application simply means editing source code and refreshing the browser. All source files are dynamically loaded on demand. There's no building process involved. When it comes to deployment, Sencha Cmd provides the following four build environment options:
testing - intended for QA prior to production. All JavaScript and CSS source files are bundled, but not minified, which makes it easier to debug.
package - creates a self-contained, redistributable production build that normally runs from the local file system without a web server.
production - creates a production build that is normally hosted on a web server and serves multiple clients (devices). The build is offline-capable using HTML 5 application cache, and is enabled to perform over-the-air updates.
native - first generates a package build, then packages it as a native application, ready to be deployed to native platforms.
I have been working on firefox add-ons for quite a long time and its been a real headache to use notpad++ for development. Is there any suitable IDE or plug-in for eclipse available.And just like we do **Run on Server" for dynamic web-projects,Is there any way that, I do a change in any of the sorce file and it automatically creates the .xpi file and installs in firefox?
There are a lot of editors or IDEs that could be easily integrated with the SDK to perform basic tasks like running cfx run or cfx xpi. Here's the system that I use:
I have Wladimir Palant's 'Extension Auto Installer' installed in Firefox
I have a script like this in the add-on's root directory:
#!/bin/bash
/path/to/cfx xpi && wget --post-file=filename.xpi http://127.0.0.1:8888/
Every time I want to test the add-on, I just run the script and the xpi is built and installed into Firefox. Most editors will have some capability to bind a shel command like this to a keybinding.
You don't really need IDE to create XPI every time you make a change.
Create a folder with your addon's source code (e.g.
C://addons/myaddon/).
Put a file containing this path to the folder
containing your Firefox addons and call it the same as your addon ID
(e.g. myaddon#domain.com).
In your install.rdf file, add this line: <em:unpack>true</em:unpack>
This way you can just restart the Firefox whenever you want to see the changes. I recommend this addon, it adds a keyboard shortcut Ctrl+Alt+R for quick restart of Firefox (be sure to get the 0.6b2 version, previous versions don't support the keyboard shortcut):
https://addons.mozilla.org/firefox/downloads/file/121516/restart_firefox-0.6b2-fx.xpi?src=dp-btn-devchannel
Also, you will not loose your source code in case you uninstall your addon while testing (this happens when you develop directly in your Firefox addons folder).
As of IDE, for me personally any editor with syntax highlight for XML and JS works just fine. My personal favorites are Aptana (Eclipse based IDE) and Intype (lightweight and extremely fast).