I am trying to start debugging session using built-in WebStorm server after I created a new JavaScript debug configuration. I am using this project:
https://github.com/pauldessert/SeedTip.git
I am experiencing this weird problem that all of my locally referenced .css and .js files:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/map.js"></script>
<script src="js/search.js"></script>
...could not be found/loaded by the browser. I show this in bellow image when I pressed F12 to see Chrome Dev tools (this action seems to disconnect WebStorm IDE support extension) and you can see failed requests.
You can see in the console tool window in WebStorm that there were get request for .css and .js local files. When I press any of these links it opens ok in my Chrome browser.
E.g. this file does exist:
http://localhost:63342/SeedTip/css/style.css
When I use an external node server e.g. grunt-serve and create JS debug configuration with URL: http://localhost:9000/index.html pointing to:
F:\Projects\Angular\v2\SeedTip and run this debug it works.
Note: I have the same problem with enabling Angular 2 apps to load with systemjs.
I tried setting but it doesn't help.
I was a known bug, that was fixed in the latest build.
Related
I am developing an application with Polymer 1.8.0. While trying to remote debug in Chrome from VSCode I noticed that the line numbers in the Chrome source view did not match with the line numbers in VSCode and henceforth debugging did not work at all.
After some testing I realized that polymer serve seems to reformat the files, e.g. the source file (line break with LF, indention with spaces)
<link rel="import"
href="../polymer/polymer-element.html">
would be delivered as
<link rel="import" href="../polymer/polymer-element.html">
with no line break at all.
My first guess was that the recompilation feature for ES6 was to blame and I disabled it with polymer server --compile never but with no success.
I am using Mint 19, Polymer 1.8.0, Chrome 70, VSCode 1.28.1
Seems to be a known bug, see here: https://github.com/Polymer/tools/issues/389
After compiler my application in GWT Super Dev Mode,
Run: "http://localhost:9876/" in IE 11,
see the followings,
GWT Code Server
1.Drag these two bookmarklets to your browser's bookmark bar:
Dev Mode On Dev Mode Off
................
3.Click "Dev Mode On" to start development mode.
when click "Dev Mode On", is shows "Can't find any GWT Modules on this page."
Anyone knows how to debug GWT in IE 11?
Thanks!
Phase 1
Compile your project
Host it in some webserver
Test it by surfing to this URL
Now phase 2
Run as superdevmode
The SuperDevMode page opens
Surf to the website you created in phase 1
Click the DevMode on bookmarklet you placed in your bookmarks bar
The app should compile
You are missing point 2 (which you left out here):
Visit a web page that uses one of these modules: [your_module_name]
So probably you didn't define a startup url for your run configuration (which IDE are you using?). You can do this with the argument -startupUrl index.html. The index.html should be placed in your output war directory.
Depeding on the port you configured (default 8888) you have to visit this html-page (with the module.js injected of course) to start the compilation. An example url would be:
127.0.0.1:8888/index.html
To debug your application in IE 11 you have to set breakpoints with GWT.debugger() for the client code. For the server code you can use the breakpoints of your IDE. To use the clientside-breakpoints you have to open the Developer Tools of your browser (F12 in case of IE11). There go to debugger/sources or however the tab is called in the case of your browser and debug your application client code directly in the browser. Keep in mind to use source maps to map your Java source code to the generated JS file.
I am trying to install SAPUI5 on my local machine using XAMPP.
I copied the files to htdocs.
Starting localhost in Chrome I get the SAPUI5 SDK - Demo Kit Overview page.
After that I copied a sample code of the "HowTo in 20 seconds" code to notepad and saved it as HTML-Document.
Running this file in the browser only brings a white page.
I looked for the developer tools in Chrome and saw something like this:
"failed to preload 'sap.ui.core.library-preload': Not Found - sap.ui.ModuleSystem"
I hope you can help me fix this problem, so I can start with SAPUI5
Useful links regarding this topic, which I could recommend:
Describes how to run UI5 App locally: http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate
Describes to local Development with Eclipse: http://blog.mypro.de/2014/01/14/ui5-boilerplate-with-eclipse/
They both use the UI5 SplitApp Boilerplate from Github, which is an example app, with a base application structure: https://github.com/6of5/UI5SplitApp-Boilerplate
Perhaps this helps you to start local developement
Open a new notepad file. Save below code with html extension, eg: helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 in 20 Seconds</title>
<!- 1.) Load SAPUI5, select theme and control library ->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!- 2.) Create a UI5 button and place it onto the page ->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function() { $("#btn").fadeOut(); });
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(document).ready(function() {
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press: function(){ $("#btn").fadeOut(); }
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!- This is where you place the UI5 button ->
<div id="uiArea"></div>
</body>
</html>
Now open the file with any modern browser. FYI, We don't need any server to test this
You can configure Eclipse to work with SAPUI5 and use Apache Tomcat to run your application when working in a local environment.
Install Eclipse - http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr2
Install the Java Runtime Enviromnet - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
Install Apache Tomcat - http://tomcat.apache.org/download-80.cgi
Install SAPUI5 tools in Eclipse
Eclipse > Help > Install New Software
Add a new site in the "Available Software Sites" with the url:https://tools.hana.ondemand.com/luna
Select the new site in the Work with selection.
Expand the UI Development Toolkit for HTML5 & Select UI Development Toolkit for HTML5 (Developer Edition)
Next & Install (An Eclipse restart may be required)
Now that you have the SAPUI5 Tools installed. If you create a new Project, you now get a SAPUI5 Application Development option available.
Configure Apache Tomcat in the Servers
Add a Server, Window > Preferences > Server > Runtime Environment > Add
Select Apache Tomcat 8.0( or whichever version you are using) & select Next.
Select Tomcat installation directory & Finish.
Now you are all set to go. Create a new SAPUI5 Project(say myProject), add some code. To run it on tomcat, right-click on the Project, Run As > Run On Server. Select your Tomcat server, Next & Finish. You project will be up & running on your server at http://localhost:8080/myProject/
The "failed to preload" messges should not be fatal errors; the library preload files are an optional bundled optimization in order to reduce the number of HTTP requests.
https://github.com/SAP/openui5/issues/119
I think you can just ignore this warning. And I encounter Cross origin requests problem when loading Component.js, solved this problem using python -m SimpleHTTPServer. What you need is just a server , choose whatever you like.
Daniel I recommend you SAPUI Walkthrough as a starting point. This is a step by step guide / tutorial on how to build SAPUI5 applications, contains explanation about the cornerstones and best practices. For the basics you will only need an editor and a browser (no webserver). This git repo contains all the Walkthrough steps as separate branches.
SAP UI5 is only bunch of UI libraries that are used to develop your front end, just like other libraries like jQuery. Now, the question is how do you configure your Apache to serve these files? This is a basic Apache configuration to serve files, this page might be a good starting point.
Currently I am developing a GWT project by using GWT 2.4.0 in eclipse 3.7. I deploy the app inside Tomcat 7. It run perfectly for the past 2 months.
However, now I am running into a problem which I unable to trace the problem. Here is the source code for "welcomeGWT.html".
<!doctype html>
<!--
The DOCTYPE declaration above will set the browser's rendering engine into
"Standards Mode". Replacing this declaration with a "Quirks Mode" doctype may
lead to some differences in layout.
-->
<html>
<head>
<meta name='gwt:module' content='com.haircare101.cesapp.Main=com.haircare101.cesapp.Main'>
<title>101 HairCare: Customer Excellence System</title>
</head>
<body>
<script type="text/javascript" src="com.haircare101.cesapp.Main/com.haircare101.cesapp.Main.nocache.js"></script>
</body>
</html>
As the tomcat started, I type the corresponding URL into browser and it shows me this page with no error (no error shows inside Tomcat log files). But it unable to direct me to the specified GWT Main Entry Point (I saw this source file when I can "View Source" of browser).
** I have no compilation error, no deployment error or no runtime error.
Can anybody tells me the reason why it stuck in this page? Many thanks and appreciate!
Cheers,
Ryan C.
Besides using google chrome, enable firebug to debug your javascript and find out what's wrong. Apparently you have an array acess problem.
Most probably, it is in your GWT entry point and not in javascript (don't forget that all the client package code is transformed into javascript)
I remove the inherit of standard the from my module and replaced for:
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
But my project still includes the standar theme, and after the clean:
<link rel="stylesheet" href="http://127.0.0.1:8888/formulariorequerimientos3/gwt/clean/clean.css">
<link rel="stylesheet" href="http://127.0.0.1:8888/formulariorequerimientos3/gwt/standard/standard.css">
So the styles are mixed and I see the horrible dialogbox of standard theme, please help!
Probably caching issue. Shut down you dev IDE and server serving the app .It's should really be in hosted mode.Clear browsers cache. Shut down your machine and restart. You will not have to do this all the time but sometimes caches get stuck. Also make sure there are not error in IDE and and check sever log as well (meaning logs from hosted mode server) to see any errors being thrown.
Check your War\Webapp if you see clean/clean.css then delete clean folder altogather. Also suggest Project->clean if you are using eclipse.
The problem is that I wa including a module (one of UI utils) that inherits standard theme, so I replaced for clean