When I load the default ST app in IE10, styling is non-existant even with the following defined in app.json:
If I load in Chrome, the styling is present. I have carried out an app refresh too.
I'm using ST2.3.1 with cmd 4
"css": [
{
"path": "resources/css/app.css",
"platform": ["chrome", "safari", "android", "firefox"],
"theme": "Default",
"update": "delta"
},
{
"path": "resources/css/wp.css",
"platform": ["ie10"],
"theme": "Default",
"update": "delta"
}
If I look in myapp\resources\css I can see app.css and wp.css.
Looking at the Sencha theming guide, you may need to change "theme" from "Default" to "Windows" in your second JSON object. Then do a sencha app refresh and try again.
Related
Is there a way to enable Microsoft Edge extensions during debug sessions? This is a Vue 3 application and I'm using the following launch.json:
{
"name": "Frontend",
"type": "pwa-msedge",
"request": "launch",
"url": "https://localhost:8080/",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": false,
"sourceMaps": true,
"pathMapping": {
"/_karma_webpack_": "${workspaceFolder}"
},
"sourceMapPathOverrides": {
"webpack://vue4/./src/*": "${webRoot}/*",
"webpack://vue4/src/*": "${webRoot}/*",
},
},
For some reason, Microsoft Edge does not load any extensions when I press F5 in VSCode. Not only that, there is no extension shown in Edge Settings either. Looks like VScode instructs Edge to load with some no-extensions argument, but I can't figure out where and how to change that.
I'm primarily concerned about the Vue tab in DevTools. This tab (and all other extensions) loads automatically when I open Edge normally, but not when launched from VSCode.
Running code in Edge extension throws a TypeError, unable to get property 'create' of undefined or null reference.
I have tried running it in both the popup and background scripts. I have the notifications permissions in the manifest. I did see that some APIs require being run in the content script, but since I'm not engaging the tabs or web pages, I don't think that applies to me...?
Manifest:
{
"name": "xxx",
"author": "xxx", "version": "1.1",
"options_page": "options.html",
"background": {
"scripts": ["jquery-3.3.1.min.js","background.js"], "persistent": true
},
"permissions": [
"xxx",
"background",
"notifications",
"storage"
],
"offline_enabled": true,
"browser_action": {
"default_title": "xxx",
"default_popup": "popup.html",
"default_icon": "32.png"
},
"manifest_version": 2
}
Background script:
try{
browser.notifications.create("test",{
"type": "basic",
"title": "Test",
"iconUrl": "48.png",
"message": "This is a test"
});
}catch(e){
alert(e);
}
Based on your description, first, you could try to upgrade the Edge browser to the latest version, then, try to use the browser.notifications.create method.
But, in my opinion, I prefer to display the notification using the Web Notifications API, you could check this article.
I'm working on my React Native app in VS Code, with the React Native Tools debugger running on "Debug in Exponent". Live reloading works, but when I enable hot reloading (after disabling live reload), hot reloading doesn't happen.
I'm sure you'd like to see various settings. Not sure what's important so here's some things:
// relevant debug config from launch.json
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
// .expo/packager-info.json
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 8081,
"packagerPid": null,
"expoServerNgrokUrl": "https://zr-j4p.tuzmusic.tuz1app.exp.direct",
"packagerNgrokUrl": "https://packager.zr-j4p.tuzmusic.tuz1app.exp.direct",
"ngrokPid": 5404
}
// .expo/settings.json
{
"hostType": "lan",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "zr-j4p"
}
Is it possible to configure VS code to debug seamlessly solutions with server code in ASP.NET Core and JS files in Chrome.
Something available in full VS (unfortunately only in IE).
I can put breakpoints on both JS files and CS files.
Thanks for help!
Create one configuration for the ASP.NET Core application and another one for Chrome (you need the Debugger for Chrome extension). Then create a composite launch configuration.
When you start debugging using the composite configuration you will be able to debug the ASP.NET code as well as the Javascript/Typescript code in the same Visual Studio Code instance. You can also launch each configuration manually and it should work.
Your launch.json file should look something like this (with an ASP.NET Core application called myapp):
{
"version": "0.2.0",
"compounds": [
{
"name": "Browser/Server",
"configurations": [
"Server",
"Browser"
]
}
],
"configurations": [
{
"name": "Server",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/myapp.dll",
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceRoot}/Views"
}
},
{
"name": "Browser",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
},
]
}
Simple way :
Close IE but debuging are Running
Choose Lunch Chrome (must config lunch.json URL same )
In my development I need to include third part javascripts; like money.js (http://josscrowcroft.github.com/money.js/)
What is the best 'clean'/'proper' way to achieve it ? Just include it in index.html ?
No. Don't directly add the additional javascript files in the index.html file. That is not the recommended way (though it may work).
Instead, do like this,
Include the following line in your index.html. microloader is the folder that is shipped with sencha sdk and contains three files mainly, development.js, production.js and testing.js , each one for it's own purpose.
< script id ="microloader" type="text/javascript" src="../../microloader/development.js"> < /script >
Then, in your <appname> folder, you will need to have a file called as app.json. It will look something like this ..
{
"name": "Sencha",
// All javascript files go here ...
"js": [
{
"path": "../../sencha-touch-all-debug.js"
},
{
"path": "app.js",
"update": "delta"
},
{
"path": "http://josscrowcroft.github.com/money.js/",
"update": "delta"
}
],
"css": [
{
"path": "../../resources/css/sencha-touch.css",
"update": "delta"
},
{
"path": "resources/css/app.css",
"update": "delta"
}
],
.....
.....
.....
}
If you are using Sencha Cmd your index.html may look like this:
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
So after changing app.json you'll need to refresh your app:
sencha app refresh
Pure javascript did the trick for me. I just included this block of code in the launch function:
var scriptTag = document.createElement('script');
scriptTag.src = 'specify the path here...';
document.body.appendChild(scriptTag);
The scriptTag gets appended into the body of your index file.
The following worked for me with Ext JS 5.0.0, if the external JavaScript library is local. After the editing, run "sencha app build"
Make changes to three JSON elememtns in app.json.
(1) js
(2) css
(3) resources
{
"name": "Sencha",
// All javascript files go here ...
"js": [
{
"path": "app.js",
"bundle": true
},
{
"path": "leaflet/leaflet.js",
"bundle": true
}
],
"css": [
{
"path": "bootstrap.css",
"bootstrap": true
},
{
"path": "leaflet/leaflet.css",
"bootstrap": true
}
],
.....
/**
* Extra resources to be copied along when build
*/
"resources": [""leaflet/leaflet.js","leaflet/leaflet.css"
],
.....
.....
}