Mobile website preview - android

My website's desktop version is almost finish.
Now, I would like to test my website on my android device (Htc One).
I'm not looking for an emulator, because I want to test all my touching reactions.
I tried with CodeKit, by generating an url, but my smartphone don't want open the page.
Do you have any soft to recommend to do this ?
I coded with Brackets using mamp.
Hope you have understand my problem,

If you're already using Brackets, then Adobe Edge Inspect may be a good option because it has a Brackets extension available.
Edge Inspect syncs mobile devices with your desktop browser so you can test across all of them at once. And it makes it easy to connect dev tools to your mobile device for debugging the mobile rendering (although it's a slightly limited version of the dev tools, called weinre).

First make sure you have MAMP installed on your machine.
Next step is to get your IP address on your MAC > System Preferences > Network > AirPort.
Now you’ll need the Apache Port from MAMP. (default is 8888).
Put these two piece of information together to make up the URL for your iPad/iPhone: 192.168.100.170:8888.
Now go to this url with your smartphone and that's it !
http://www.designshifts.com/view-local-wordpress-website-on-your-iphone-or-ipad-with-mamp/

Related

Chrome://inspect shows my device but I can't inspect it

I want to get my hands dirty with app automation so I've been playing around with learning Appium (if anybody has any good tutorials send em my way!). I have an app on my local machine that I'm wanting to use for testing purposes.
The app is one I've created with c# and Xamarin Forms so I have all the files and the .apk locally.
I found a video that said you could use the chrome://inspect page to view apps in an emulator and even inspect them. When my app is running (starting it via Visual Studio) I can see it pop up in the device list but I don't have the option to inspect it.
I'm not sure how people feel about pictures but I don't really have any code to post so I'll just show you that the app is, indeed, running and what I see on the chrome devices page.
Here is my app running
And here is the device list from chrome. You can see the emulator there but I can't do anything with it
What am I missing here?
Chrome://Inspect is a part of Chrome Dev Tools that lets you see port forwarded web views from the mobile in a desktop browser. This is because we cannot inspect elements in Chrome mobile (something we do in desktop browser with CTRL+SHIFT+I) and we have to forward the chrome mobile window to chrome desktop.
To inspect element, if you're working on a web page or web application, just simply right click on that page and choose Inspect
And in your case, for inspecting Android application (apk), you should use UiAutomatorViewer, AppiumStudio, Katalon mobile spy, etc...
Here is my answer to similar question: https://stackoverflow.com/a/58204262/7302505

Testing Network Throttling using chrome dev-tools for an android app does not work

Goal: Test android app on a physical device with various network connectivity issues (Offline, Slow 3G etc). Android Emulator is not an option for my use case.
Steps I have tried: (Remote Debugging)
Connect my phone to my computer and open the app on my phone.
In chrome "Remote devices" I select my phone and click on inspect for the app opened on my phone. Once the Developer Tools window opens I can play with my app from chrome.
In the network tab I can see the throttling options but when I try the offline option or any other option to slow down the network it does not seem to work.
The offline/slow 3G option works for a normal website but not when using remote devices. I wanted to see if anyone has tried this option before and if it worked for them and I would appreciate suggestions for better alternatives to test an android app with various network settings other than using chrome remote devices?
Other options I have come across are installing a proxy app on PC/Mac and configure networking throttling in the app and then create a wifi hotspot and connect my phone with it. This is possible but it would be tricky with the tools we use so I was looking for a more elegant solution.
The "remote devices" of chrome won't affect your native app. It will not even affect another opened tab other than the one you are "inspecting" and throttling. If you really need to throttle your device's network connection you should use a proxy. A good and easy to handle proxy is Charles web debugging. The free version will cover your needs if you are willing to reconnect every 30 mins. But for sure I recommend you purchase a license since this tool will be always helpful and developers also need to make a living ;)
Here is an example of setting up Charles as a proxy for an android device.
It's a little unclear from your question, but I'm assuming that you're using Remote Debugging to run a webpage on an Android device, and you want to profile the webpage from a laptop/desktop connected to the Android.
One workaround is to use https://www.webpagetest.org/easy. This actually runs your webpage on a real Motorola G device in Virginia with a Slow 3G connection. It gives you a detailed report on your loading performance, just like the DevTools Performance panel.
One of the DevTools team members said that Remote Debugging + Network Throttling should work, but neither of us has tried it recently.

Remote Chrome debugging on Android device

I've followed https://developers.google.com/web/tools/chrome-devtools/remote-debugging
and am fine up 'till "Step 2: Debug content on your Android device from your development machine."
I'm logged into the same Google account on dev and remote browsers in all cases.
I see the device w/serial number, and it displays the fact that Chrome is running on the Android device, but I do not get the Chrome version or URL entry field as shown in the screen shot.
This is Android 5.0.1, with current versions of Chrome on both the OS X 10.10.x dev machine and the Android device.
I have also tried with all combinations of Chrome/Canary on the dev machine and Chrome/Chrome Dev on the Android machine with identical results.
Thinking it might be a browser extension or something, I also put Chrome and Canary on a freshly installed OS X 10.12.x beta with no extensions etc. with identical results.
Obviously, USB debugging is on, but the device also requires me to select one of three modes for the USB anyway. Selecting "charge only" disconnects the debugger, the other two lead to this same behaviour.
So...
A> Is there something I need to do that's not in the instructions on the above referenced page?
B> Is it possible that the carrier (TracPhone, it's a throw-away dev machine) is doing something funky at the Android level to keep this from working?
Please be gentle, this is my first Android experience so maybe I'm missing something obvious to the old hands out there.
Thanks,
ssteinerX

Chrome reports 2 different SSL padlock states for same site from different computers, possible infection?

This is a doozy. Will try and make it short and sweet.
Hitting the same web URL, my desktop computer reports SSL errors for many sites. HTTPS with a red line strike through and red padlocks in descriptions.
My mobile phone does not, on wifi or mobile network. My remote computer in a remote location does not. Green padlocks for all.
Chrome browser is up to date and latest (Version 47.0.2526.106 m) across all browsers. Extensions are identical across local and remote desktop.
I cannot for the life of me figure out what is loading up on my desktop at home that isn't loading up on my remote desktop at my moms. Both machines are on Win7 64 bit. Both chrome browsers are same version, same extensions running. Recently 'reset' chrome on my home desktop to try and fix. Worked first time, but problem came back. Second time it didn't do anything. Very random. Somedays i'll get green padlocks, somedays i get red ones. The intermittent nature of this has me dumbfounded. Also, all of the browsers actually state the info about an obsolete cipher, but only my desktop deems it to be redlock worthy. It also claims there are other insecure resources on the page, but my remote desktop and mobile device don't see them. wth?!?!
Should i completely remove chrome and reinstall it from scratch? Since i already used the 'Restore settings to their original defaults.' button in the settings.. this doesn't seem like it would cure it.
One other aspect i haven't been able to determine is whether my computer being hardwired into a TL-WPA4220 WiFi Powerline Extender is the culprit. Does the fact the extender/repeater not a direct connection to my router have anything to do with this? Altho my mobile phone is connected to that wifi access point and it shows a green padlock on the same sites so....
I am currently running a virus scan as we speak.
Any guesses? Thanks in advance.
Attached pics.
home desktop | remote desktop
if you look at the dialog at the home desktop closely you will see
connection is not private because the site loaded an insecure script
Since you don't see the message at the remote desktop it is very likely that a locally installed browser extension causes this problem. Thus check your extension, disable them and retry.
I figured it out after thinking long and hard about the differences between computers. Ultimately i realized that all the working browsers were either fresh installs, or browsers that didn't have my user account connected and synced through it.
I ultimately went to Settings > Sign In / Disconnect your Google Account... and made sure all cookies/data for the local device were removed. Then i did a full browser 'Reset'.
Once i had the default standard page asking me to sign it, i tested the offending page. It showed up with a green padlock. I tested other offending bank sites as well. All green.
From there i closed the browser and restarted it, and when presented with the page to log into my google account, it resynced all my bookmarks/toolbars/extensions.
And still all green padlocks. Hopefully this is a permanent fix but for now it's all holding well. I also got slightly more updated to Chrome Version 47.0.2526.111 m.
My assumption here is that somewhere between the time i first synced my chrome to my google account years ago on this computer, whatever version it was then (42,45,who knows) that one of the updates to chrome didn't take well on my desktop and was creating conflicts only on this computer under this local profile. No amount of clearing cookies or resetting the browser could fix it. Fully disconnecting my account and re-syncing my chrome to my google account is what fixed the HTTPS / SSL padlock problems.
Not sure if this will help anyone, seems i was the only one on the internet with this problem. :P

How to see information related to network tab in chrome mobile browser

Is there any way to see the network related logs in chrome mobile phone browser?
I have tried and I found that in desktop browser we can view network related information
I want to see how page load time in network tab for chrome mobile browser
Yeah, you definitely can. Check out this tutorial:
https://developer.chrome.com/devtools/docs/remote-debugging
It'll allow you to debug your mobile browser from the desktop dev tools.
Maybe it is a little late but i still leave my answer here.
Android
if your android app is using stetho, then you can:
Connect your device with a usb cable to your PC
Navigate to chrome://inspect/#devices
It opens a page which includes the list of your devices
Click on the link of your device and it opens Developer tools of chrome for you, which includes console, and Network tabs
But, keep in mind that your app must benefit from stetho, otherwise you don't see anything.
IOS:
Install Charlesproxy
Follow this guideline

Categories

Resources