A Picture speaks a thousand words:
I'm using the latest Microsoft Edge Dev Channel (v91.0.831.1 right now), and for some weeks till now the console is completely blank and unaccessible. I have tried:
Opening on anonymous mode
Opening via powershell by executing msedge.exe --safe-plugins on the dev channel msedge
Disabliong all extensions
Restoring DevTools defaults through the devtools preferences
Restoring the Edge browser defaults through edge://settings/reset
going to devtools://devtools and cleaning local storage
I'm hoping someone else went through this already. Maybe there's some other corrupted configuration I'm not aware of that I can reset?
For the record, the console is working fine on regular Edge(v89), only the Dev Channel version seems to have this problem.
This was a bug on Edge Dev and was fixed today
Related
I am using #ionic/storage as it looked quite promising after reading about it in the V2 Docs.
I use Chrome on my Windows 10 laptop so things appeared to be working perfectly fine at first. However, when I tested it on iPad, or even Firefox on my laptop, I was surprised to find out it did not work.
I was able to resolve the issue on Firefox by removing the sqlite plugin (I thought I will add it when I am ready for native testing):
cordova plugin remove cordova-sqlite-storage --save
Sadly, storage still doesn't work on the iPad. I tested it on Safari and Chrome. I am unable to debug this given the lack of developer tools or console.
I am quite frustrated how Apple makes you dependent on using a Mac to develop on their devices.
How do I go about fixing and debugging this?
I first import storage in Ionic 2:
import { Storage } from '#ionic/storage';
Then to save the data, I do this:
this.storage.set(pk, JSON.stringify(reportObj));
Where pk is just a unique key, and reportObj is an object that I stringify before storing. Again, keep in mind this just doesn't work in iOS.
Thanks.
Update:
So I managed to run the app in Safari and found out that .set actually works and the data gets stored in WebSQL. However, the get does not seem to work and I wasn't able to get any useful errors in the console.
OK, so after a lot of trial and error, I found out that the problem is not really with Storage. There appears to be some other issue with my UI, where it doesn't seem to work on iOS.
I decided to answer the part about testing the app on iOS while in development if you are not a Mac user. The best way for this appears to be to use Ionic View. You can use this simply by typing:
ionic upload
Make sure you create your account. In your iPad or iPhone, you can then download Ionic View app from iTune, sign in, and the app will appear there.
As you upload your code, simply upload again and almost instantly the app would upload on the device as you click Sync.
Hope other Windows users benefit from this.
Does anyone know a way to silent print via a Chrome App?
I'm developing a chrome app for a KIOSK system which runs Chromium OS. I need to print a receipt via a Chrome App, which I already did. The problem is that print dialog box appears once print process is started.
Is there any way around this?
This is IMPORTANT INFORMATION about kiosk mode Chrome app
Kiosk parameters can not be useful when you install app in developer mode (1) ( Parameters = "kiosk_enabled":true and "kiosk_only":true located in manifest.json )
But the parameters work after install the app from Chrome Store. Therefore be careful about this trick.
Now my kiosk app can run full screen and silent print (without preview).
1) http://lifehacker.com/install-chrome-extensions-from-outside-the-store-with-d-1596918011?disableinsets=off&utm_expid=66866090-49.VYy4WCNHSyuP6EmjnM93MQ.1&utm_referrer=https%3A%2F%2Fwww.google.com.sa%2F
I found a temporary (maybe not temporary :) ) solution for this subject:
SOLUTION FOR CHROME APP
Install your App to chrome
Create shortcut from this app to desktop.
Right click > Properties > Edit Target Textbox like the below (you will add "--kiosk-printing" parameter )
Before Edit: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory="Profile 2" --app-id=eoaefbbbpgcbhgeilphgobiicboopknp
After Edit: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk-printing --profile-directory="Profile 2" --app-id=eoaefbbbpgcbhgeilphgobiicboopknp
Absolutely restart chrome for effect (close every tabs and windows on chrome)
Try to print
If you want to remove default header and footer (page address and date) : Open normal chrome print something > on printer preview > More Settings > uncheck "Header and Footer". Chrome ll remember this settings always.
(In fact chrome must provide this property on manifest.json too, but i couldnt find yet)
If you're specifically targeting Kiosk mode apps, you just need to set a flag.
Specifically, --kiosk-printing
I'm not 100% sure how to do that on a Chrome OS device in Kiosk mode. Maybe you need to set it at chrome://flags before switching to Kiosk mode.
Sorry man, it's not possible.
But you could evaluate some workaround: install a web server, make an httpRequest, and then print using a server side language.
In my case, I used php to receive the http request from the chrome app, and then, from php, I launched a java app for the print. I used java because with php (php_printer.dll) is not possible to print images (it's possible to print bmp, but the process to convert a png to an bmp is too long).
I know, it's a little tricky, but it works.
I want to test my website on Safari on my iPad. I only have another PC. Is there a way for me to do remote debugging like ADB (Android Debug Bridge) with mobile Chrome? I searched on StackOverflow, seems there is an Adobe Edge Inspect CC, but I don't know if this is a good choice.
Thanks!
Update October 2019
This solution doesn't work for IOS 12+ (resource 1, resource 2).
Updated and tested on 24/6/2017
Using Chrome on Windows 8 and more recent:
Download and install Node
Download and install ITunes and connect it to your Device. (A pop-up should shows to your iPad to get authorization)
. Be sure to allow web inspector in your iPad
Download and install the remote webkit adapter
Using Powershell (As administrator):
npm install remotedebug-ios-webkit-adapter -g
Execute the adapter:
Using Powershell (as administrator):
remotedebug_ios_webkit_adapter --port=9000
You should get a similar output:
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000
remotedebug-ios-webkit-adapter is listening on port 9000
iosAdapter.getTargets
...
Open Chrome and go to the following link:
chrome://inspect/#devices
Click on configure next to "Discover network targets" and add the following:
localhost:9000
Make sure to have the web page you want debug open on safari, you should see it on chrome inspector page under Remote Target
Extra step for iOS 11 Thanks to #skaurus
See monkeythedev's answer for the easiest way to debug on a Windows 8+ machine with iOS 9+. I updated my blog post using information from that answer and other sources and also recorded a screenshare. The method below should still work for iOS 8 and down, if needed.
There is actually a pretty easy way to debug a website in Safari on iOS using Firefox on a Windows machine.
NOTE: Ryan wrote in the comments below that this may only work on iOS 8 and down. I am unable to confirm, but be aware.
I wrote a detailed blog post about this, but here are the highlights:
Install iTunes to get the "Apple Mobile Device Support" and "Apple Application Support" applications that come with it. (uninstall iTunes afterward, if you want)
Connect your iOS device via USB.
Enable web inspector on iOS (available on iOS 6 and later).
Open Safari on your iOS device and browse to a website.
Open Firefox on your Windows machine and press Shift + F8 to open WebIDE, which should include the necessary Valance add-on, if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).
For some reason, I couldn't get it to connect to my iOS device until I downloaded the ios-webkit-debug-proxy-win32 program and ran it. It opens a blank Command Prompt, but after I went back to WebIDE after opening it, I disconnected, then reconnected, and I saw debug info for the website I had opened in Safari. You may not need to do this though, as another user just had to add an exception to their firewall then disconnect/reconnect, and it worked.
The debug info available isn't as exhaustive as Chrome Developer Tools (specifically no "Networking" tab), but it was enough for me to be able to view what was going on in the Console.
2018 Update:
Since the original post, the blog post is dead & Telerik App Builder is discontinued and no longer offered. Adding this update to inform readers in case they don't read the user comments that follow this answer post. As for the blog post, for those still interested, here's a web cached copy. Regarding the blog, I think the company that blog's from has since shut down.
When I get a chance, I'll see if I have a copy of the app builder saved so that I can post it online for those still interested in using it, along with another cached copy of the blog post maybe.
Original Answer
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
MIH Tool - basic edition
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
This question was more than 4 years ago, but I feel like it's worth to mention another option which is platform-independent which seems is not mentioned above:
VConsole
It's a JavaScript that you can inject into your page(s) which will overwrite all native console output and show it as an overlay on top of your page content, in a level of detail that is almost as good as Google Chrome's Developer Tools.
Runs well on iOS Safari, as well as on other mobile browsers - for as long as JavaScript is enabled in the browser.
How to install: https://www.npmjs.com/package/vconsole
You will need NPM tools to install it, but not actually required to use NPM to build your project. You can simply install VConsole somewhere in a separate folder, and just copy-paste vconsole.min.js from it.
Once you inject it into your page, will look like this:
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visually is very appealing, you will see green button in lower-right corner of your page on your mobile/desktop browser, which will open console overlay.
Very neat!
Of course, it does not provide you with ability to select an element, see calculated css etc., but if you are looking for console output and some network report, this one is really easy to use.
October 2019
AFAIK, For recent IOS versions there is no overall solution for debugging IOS from a PC.
You can however use one of the following solutions:
Display console messages in the browser itself. As described here and in Sinisa's answer.
The "remotedebug-ios-webkit-adapter" doesn't work for debugging IOS 12+. It requires extra steps for IOS 11, and works for IOS 10 and perhaps older versions as well.
I use PrePros for CSS preprocessing and it has a built in server for mobile debugging and web inspector. But this is only good for local sites even still...
In my experience it is often not an issue with mobile Safari only but Safari in general. In these cases it can help to try the normal Safari (for Windows) and see if the bugs appear there. If so, it's much easier to debug something by this way.
2021 update:
The creator of RemoteDebug here. I've built a replacement for RemoteDebug called Inspect, which packages everything together in a pleasant experience and enables easy iOS web debugging from Windows, macOS, and Linux, with a few extra features like screencasting and wifi debugging.
http://inspect.dev
There are a couple of options I've come across for debugging on iOS. They're not full step-through debuggers, but they offer a JS error log, console and some inspection tools:
1. Eruda
By adding the following snippet to the top of your page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
You get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Available at https://github.com/liriliri/eruda
2. MiniConsole
This one I developed myself when I had not discovered another suitable option. It has less features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
3. vConsole
Another similar option that I've not really tried. Available at https://www.npmjs.com/package/vconsole with a live demo at http://wechatfe.github.io/vconsole/demo.html.
I haven't tried this on a PC, but you should be able to go to http://[DEVICE_IP_ADDRESS]:9999 to debug.
When i just enable a html file from my pc to emulate.It just shows :--
"Looks like what we have here is a failure to... emulate
You're seeing this window because it looks like the zombie apocalypse has started.
"It says Hit or fire" ""
http://i.stack.imgur.com/1ABj4.png
It is working few days for me..But now i started opening it i got an error. My Ram is 2Gb and supports full requirements..
Please help me out.
That message means Ripple is waiting for something to finish, and has decided to show a warning rather than hanging. You can CTRL+I to open web inspector and see if there are any console messages that help explain what failed.
You can hit the FIRE button to clear all cached settings. This will reset Ripple to its initial state (Ripple stores all user settings in localStorage - hitting the FIRE button clears this localStorage data). If a cached setting was the reason for the "red screen of death", then you will see the black "welcome to Ripple" screen after hitting the FIRE button.
Otherwise, I'd suggest disabling and re-enabling Ripple.
Finally as a last resort, make sure to update to the latest version of Ripple using the *.crx file available here: https://developer.blackberry.com/html5/download/
if you are trying to access something in your local file system i found the problem
https://github.com/blackberry/Ripple-UI/issues/565
since you're running in the file:/// scheme, you need to get around
the browser's security a little bit. Do the following:
in chrome://chrome/extensions/ make sure the "Allow access to file URLs" is checked for Ripple (might have to go into developer mode to do that, check box on the top right of the page)
quit chrome and restart it with --allow-file-access-from-files flag
doing this resolved the problem for me.
you can check with this page github.com/blackberry/WebWorks-Samples/tree/master/HelloWorld
I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?