When debugging a SPFX Field Customizer Solution using VS Code, I cannot get the breakpoints to hit in the IDE. If I open the dev tools in the browser, I am able to put in breakpoints in the code and get them to hit, but not in the VSCode IDE.
In contrast, when I debug a WebPart using the hosted workbench, I am able to get the breakpoints to hit correctly in the VS Code IDE.
Here is what I am doing:
Create Simple Hello World Field Customizer from the MS guidance here.
Create the test list in my tenant.
run gulp serve --nobrowser
Put a breakpoint in the render method and then
start debug from VSCode using the following config:
{
"name": "FieldCustomizer debug",
"type": "chrome",
"request": "launch",
"url": "https://testtenant.sharepoint.com/Lists/Orders/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"myGUID","properties":{"prop1":"val1"}}}",
"webRoot": "",
"sourceMaps": true,
"resolveSourceMapLocations": [
"${workspaceFolder}/",
"!/node_modules/**"
],
"sourceMapPathOverrides": {
"webpack:///../../../src/": "/src/",
"webpack:///../../../../src/": "/src/",
"webpack:///../../../../../src/": "/src/"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
]
}
Breakpoint is not hit but field customizer correctly renders in a new instance of chrome after allowing loading of scripts. Same issue in Edge.
Related
I may be unaware about the debugging in VS code tool. I am trying to debug my typescript code using Nodejs debugger. But, I expect that as soon as I click on Debug play button the server of my code should start on some port , so that I could after that start hitting api through POSTMAN & then debug it on VS code . But, what happens is that as soon as I click on Debug Play button, the control comes to my set break point & then I keep on stepping over until it reaches to last line of server port ignition & then server just starts in Debug mode. After this, I try hitting the api url from POSTMAN which successfully shows the response on POSTMAN itself. But, Nothing happens on my Debug console. There is no show on Variable values.Absolutely nothing... Can anyone please help me what I'm doing wrong here... I also tried Debug with chrome but it is throwing error in launching the chrome app itself & I am unable to figure out this Debug with chrome issue also. Well below is my launch.json script for Node Debugger .
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node_Debug_launch",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\source\\server.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
Below is the behaviour of my VSCode after it ends up starting server with all the step overs done & also api url is hit from the POSTMAN with proper success response received in POSTMAN itself.
I managed to get my PWA to complete all the chrome dev tools tests but I still cannot get an install prompt to fire.
www.billtravis.net/pwa/
from what I've seen everywhere the install prompt should fire when the manifest loads before the service worker installs.
This PW also needs to live on an IIS server, which won't even register the worker.
Any ideas?
{
"name": "SYLVANIA LightPRO",
"short_name": "LightPRO",
"icons": [
{
"src": "/img/image-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/pwa/?homescreen=1",
"scope": "/",
"display": "standalone",
"background_color": "#ff6600",
"theme_color": "#ffffff"
}
Probably it due to lack of image sizes definitions in manifest.json which were required by web browser. I can see you have only 512 while different browsers expect a different set of images. So if you would not like to care about that differences in PWA implementation between the browsers, you can use pwacompat:
<script async src="path/to/pwacompat.min.js"></script>
This "polyfill" will generate all necessary images (if not specified in manifest.json) and will add metatags (required by ios for example)
I have a very simple chrome extension that refuses to run on some sites like https://mail.google.com. It runs fine on other sites which makes me think something is limiting extensions/scripts from running on some sites. The sample case is quite simple and listed below.
With this sample case I see "Hello world" in the developer console when I navigate to https://about.me. I also see the extension in the Developer Console's Execution Context Selector. However, when I navigate to https://mail.google.com I don't see the log entry or the extension in the Execution Context Selector.
I have tried something similar with tampermonkey and am not seeing that script run on gmail either. Thanks!
manifest.json:
{
"manifest_version": 2,
"name": "Gmail extension test",
"version": "0.1.9",
"description": "Try running inside gmail page",
"content_scripts": [{
"all_frames": true,
"js": ["content.js"],
"matches": [
"https://mail.google.com/*",
"https://about.me/*",
"http://*/*",
"https://*/*"
]
}]
}
content.js:
console.warn("Hello world");
Environment:
Chrome 66.0.3359.117
macOS 10.13.3 (17D102)
As #wOxxOm suggested. I tracked down the problem to the fact that my company has a Chrome policy set against running extensions on the google.com domain. I had no warning entries in the Developer Console or the macOS Console, I just tracked down other folks complaining about in an internal forum.
The policy that applies in this case is ExtensionSettings which is set in a OS/device specific way. To help diagnose this restriction, you can view your active polices in Chrome under chrome://policy/. In my case I had something like the following in my chrome://policy:
{
"*": {
...
"runtime_blocked_hosts": [ "*://*.google.com", ....]
},
I'm not aware of a generic workaround for this at the extension level. Instead I had to work with my company IT department to whitelist the extension.
I am having problem activating my own custom made script. It's working in the developer mode, when I load it as a directory. But when I pack it using the method provided by chrome it does not work.
It creates a .pem and .crx file, and when I drag and drop the extension inside the chrome://extensions page it shows. When pressing f5 it is deactivated every time, and when I check "also allow in incognito mode", that checkbox disappears immediately and doesn't come back.
Below my manifest file contents:
{
"manifest_version": 2,
"name": "Test script",
"version": "0.1",
"incognito": "split",
"content_scripts": [
{
"matches": [
"http://mail.google.com/*",
"https://mail.google.com/*",
"https://accounts.google.com/*"
],
"js": [
"jquery-2.1.4.min.js",
"content.js"
]
}
]
}
Any clue what's happening?
Chrome blocks extension installs on Windows unless they come from Chrome Web Store.
Install Chrome from a developer channel or use another OS.
I want to distribute a PNaCl app, inline installation and use the app without leaving the current page. I have published the app on CWS. The app needs some user permissions. Inline installation works and the app appears in the Chrome browser apps section. But, I get this error :
"NaCl module load failed: could not load manifest url"
when I try to load the app using:
<embed id="testapp"
width=0 height=0
src="testapp.nmf"
type="application/x-pnacl" />
This is the testapp.nmf file which is located in the .zip pkg that I uploaded to developers dashboard.
{
"program": {
"portable": {
"pnacl-translate": {
"url": "testapp.pexe"
},
"pnacl-debug": {
"url": "testapp_unstripped.bc"
}
}
}
}
Manifest.json in the package file looks like :
{
"name": "testapp",
"version": "0.0.0.2",
"manifest_version": 2,
"description": "TCP/UDP test",
"offline_enabled": true,
"icons": {
"128": "icon128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
{
"socket": [
"tcp-listen:*:*",
"tcp-connect",
"resolve-host",
"udp-bind:*:*",
"udp-send-to:*:*"
]
}
]
}
The HTML page is on Google's blogspot.com and verified successfully.
Observations:
You can't use socket APIs outside a packaged app (since there is no way to get permissions for them otherwise).
A packaged app is mostly self-contained: it's not something interacting with the normal browser, it's a preset collection of resources that is displayed in a separate window.
A certain website can still communicate with the app.
Seems like you're trying to follow two guides at once, for a packaged app and a web app. PNaCl can work in the context of a web app by just placing the pexe and the manifest on the site itself; but you require raw network access, and it can only be requested in a packaged app.
You can absolutely use inline install to add the app to the user's machine, but you can't embed a module from it in a normal page.
Your module can only be embedded in the app's own pages. So if you wanted to show some UI, you need to make that a page packaged together with the app and show it with chrome.app.window.create.
If you absolutely need to expose functionality to a certain website, you can list it in externally_connectable and use messaging API to communicate with the app's background page.
An app always has an event page, that is a page that unloads if it's idle. So if you just embed your module in that page by dynamically creating an <embed> element, it may fail. However, if you're using the externally_connectable method, you should be able to keep a port open, that would cause the page to keep running.