alert doesn't work in packaged apps - javascript

I'm studying webview in packaged apps of chrome and I'm studying browser sample from chrome.
in browser.js file in onload function, I added alert("webview apps"); at the first row and the code didn't work anymore, when I deleted this row, it worked again.
onload = function() {
alert("webview app");
var webview = document.querySelector('webview');
doLayout();
...
}
so does alert work on packaged apps?
P/s: console.log also doesn't work, I saw the source code use it, but nothing is displayed on inspect element window

Console.log should work, it all depends on what view you are looking at. For example to get to the logs when in a window, you have to "Inspect Element" on the page to get to it.
Alert has been disabled along with confirm and a number of other legacy web features.

This sounds like debugging. And if you want to debug a packaged app, the Developer Tools should be enough to replace alert (and other dialogs). But the Developer Tools are not enabled by default. You can enable it on the chrome://flags/#debug-packed-apps.
Check this out this blog post for an example.

You can set up your package app to run in a sandboxed mode, but this will not allow access to any of the api's that manipulate the page.
http://developer.chrome.com/apps/sandboxingEval.html
This will essentially allow the app to run in its own environment allowing you to view the app as you have programmed it. This is done for security of creating apps. Console.log works perfect. When you go to inspect element and then select console in the inspect element view you should see any "echo" results you wanted printed.

Related

Chrome SuppressDifferentOriginSubframeJSDialogs setting override using JS?

The Chrome dev team apparently just rolled out a new "feature" called SuppressDifferentOriginSubframeJSDialogs, which makes it so alert+confirm boxes from an iFrame on a different domain than the parent does not show up, by default: https://www.chromestatus.com/feature/5148698084376576
This means if you have an embedded form, and you relied upon the standard JavaScript alert to inform the user of errors (or a confirm to ensure they want to make a change), it now does nothing, completely destroying the UX.
Obviously we can overwrite the built-in alert and confirms with custom ones, but moving away from what is built into the browser now introduces re-designs for every UI (mobile, tablet, laptop, desktop, etc.) instead of just relying upon proven, built-in technology.
Is there a way to change this cross-domain setting, or to whitelist specific domains to override this feature? We do have access to the parent site with an external JS include file (obviously, otherwise this would be a wide-open back door).
To Disable SuppressDifferentOriginSubframeJSDialogs , which block js Dialog box pop up
If you are single users ( Windows ) :
Right click on desktop and create a shortcut
Windows will pop up a screen and ask you "type the location of the item:"....now paste those value into the textbox
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-features=SuppressDifferentOriginSubframeJSDialogs
Click "next" then "finish" button to create the shortcut
Now you shall see a chrome shortcut created in your desktop .Close all active Chrome instance ( if exists ) then launch the shortcut and you will found Js pop up wont block anymore.
Tips :
If you want push this fix to all your cooperate domain users , you may consider use Domain group policy to update Chrome shortcut value or use custom domain logon script logic to do so
I found a setting in the latest Chrome GPO template that creates a reg entry that will deal with this and the same reg entry placed in the Edge location also resolves the error there. (at least it worked for the problem that came up for us yesterday FWIW)
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge]
"SuppressDifferentOriginSubframeDialogs"=dword:00000000
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]
"SuppressDifferentOriginSubframeDialogs"=dword:00000000
The latest Edge GPO templates do not have the setting yet, but I imagine it's only a matter of time.
Today I tried it again with Google Chrome Version 92.0.4515.131 and it suddenly worked again. Can anyone confirm this?
Add for Mac users.
If you use mac OS:
Quit all running instances of Chrome.
Run the terminal application.
In the terminal, run the command:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-features="SuppressDifferentOriginSubframeJSDialogs"
You can see more details here :
https://trailblazer.salesforce.com/issues_view?title=salesforce-functionality-impacted-in-[%E2%80%A6]oss-origin-iframe-javascript-dialogs&Id=a1p4V000002BRMX

how to debug a web application in chrome?

I want to know how we can debug a application ex: facebook in chrome, how we can stepover each backend actions when we login into facebook. How the flow goes in backend when we login into FB...
can we do this in chrome without setting it any breakpoints ?
can we do this in chrome without setting it any breakpoints ?
As far as I know, it cannot be done. If you want to debug your project, you have to set breakpoint. Besides, you should have the sample and should use the localhost to debug it.
First of all, you should open the prject on VS and then debug it with Chrome.
1), when you debug an asp net project, it usually have naming rules. If you open a new form page in Chrome, you can find the related page on the solution explorer, and set a breakpoint on the top of it.
2) Chrome can only debug Javascript code. If you want to debug it, you should press F12 on Chrome to open the developer mode. You can see that the JS code of the current page is under the Source menu, you can set a breakpoint directly at the beginning of the script.
Then you can click on the UI button or menu to start debugging(both js and backend activity ). Also, when you enter a new form page, just follow the above two steps to debug it.
In addition, since VS2017, you can just debug js in VS, enable option Enable Javascript debugging for Asp.Net under Tools-->Options-->Debugging-->General.
Then, you can search under the solution explorer, find the current debug form page-->find the related js file, and set a breakpoint on the top of it. After it, you can start to debug the menu of asp net project.
Note: every time you enter a new page, you should search both front end and back end pages to set a breakpoint manually.

Weinre how to add new targets?

Hello I am new to Weinre and I need to debug my website which seems to act strange when opened using an IOS platform.
So I am using Weinre to debug it. I installed the tool and tested it running with the demo targets in the server itself.
Now I need to add my website as a target and run it with an iphon (or ipad) and debug it with Weinre. I don't know how to add my website as a target, I cannot manually add the
<script src="http://123.456.7.89:8080/target/target-script-min.js#anonymous"></script>
script (do not have permission to manually change the page). so How can I do my debugging with Weinre?
Thanks
You can try using a bookmarklet. The main weinre server page actually has a bookmarklet in it, for itself, that you should be able to use directly, if you can figure out how to set up a bookmarklet for your device. This seems to change release-release for mobile browsers, so you might want to do a google search on "bookmarklet" and your device's name or the OS release, to see if anyone has any tips.

My FanGate code on my works outside of FB, but not when viewed within the FB Fan Page

I am very new to FB programming and JavaScript as well (a long time ASP.NET programmer). I am trying to use the JavaScript SDK to create a fangate. The page works perfectly when I run my page directly (http://wmssupportforum.com/FacebookPages/FacebookWMSJobs.aspx), but when it is pulled up from within my Fan Page (http://www.facebook.com/pages/WMS-Support-Forum/207356652683205?sk=app_143965989047095), it doesn't work, i.e. it doesn't Show my Liked div and hide my UnLiked div, etc.
I have no idea how to debug this from within FB...(when I render it in IE directly from my site, I can debug it, but when I try to debug the Fan Page version, IE's dev tools won't load the script to debug it...it just hangs).
Any help is greatly appreciated!!!
Thanks in advance,
Chad
UPDATE: It looks like the difference is only an issue in IE v9. I don't have the same issues in Firefox or Chrome. So in IE9, pulling my page up on one IE Browser tab directly at the page URL works, but when pulled up through my FB FanPage on another IE tab, it doesn't work...seems like it is hanging as the HTML tab in IE Developer Tools window just says Loading....
It's a webserver issue. Believe it or not, but by adding in a simple P3P header to your response will solve the IE issue. See: Cookie blocked/not saved in IFRAME in Internet Explorer and also http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx

How can I debug a Firefox extension with Firebug?

I'm trying to use Firebug to debug a JavaScript file in an extension I've added to Fx 4.
Can anyone tell me how to do it? I can only see website scripts.
Use Chromebug it's firebug for extension development, witch will give you the full ability to inspect debug firefox it self and all firefox extension as if it's a webpage :)
1- install the latest version from here: http://getfirebug.com/releases/chromebug/
2- Winkey+R to open run then type firefox.exe -chromebug this will run firefox with chromebug
3- for more information visit http://getfirebug.com/wiki/index.php/Chromebug
Please see MDN - Building An Extension - Debugging Extensions, which shows what tools Firefox provides you with to natively debug extension, also take a look at Dive Into Greasemonkey - Debugging User Scripts (PDF, p.13) which is aimed more specifically at your request.
Other than that, see How to debug a Greasemonkey script with the Firebug extension?
On Firefox 19 or later, it's possible to use the built-in JS debugger on the browser itself. Go to about:config and set the following two prefs:
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
After you restart the browser, you can access the Browser Debugger through Tools > Web Developer > Browser Toolbox.
(note that you must accept the incoming connection)
See more at: https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger
In the bottom right hand corner there should be a little Firebug icon. Single or double click to open then you see some tabs at the top. Click the "Console" tab for real time debugging, or the "SCript" tab to view the scripts that have been loaded. Note, you can also load CSS and HTML through Firebug, use the "Viewer" icon to view HTML code on the page in real time.

Categories