Консоли javascript для телефона

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Console for debugging web apps right on mobile device

B1naryStudio/js-mobile-console

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Zip archive: Download

It is extremely nice, that we are on the road of specifying and unifying remote debugging protocol and we can already remotely debug web applications on desktop Chrome, but what if we want to get it working also on Android browser or Safari for iOs?

MobileConsole can be embedded within any page for debugging, it will catch errors and behave exactly as native js console in browser. It also outputs all the logs you’ve written via an API of window.console.

How is it different from all the existing instruments?

There are already plenty of ways for testing mobile applications. The most advanced is at the moment Chrome remote debugging. Still it is available only Chrome to Chrome.

Another way is to use weinre — tool for remote debugging. It is quite nice and suggests rich functionality. Still it seems quite heavy for me. You should setup a dedicated server for it.

js-mobile-console is in contrast lightweight and requires almost no configuration, you can just include it into your page and debug it when an error appears.

stevemao also stated that it may come handy for debugging web views.

Css file should be included within html:

link rel pl-s">stylesheet" href pl-s">./style/mobile-console.min.css">

Console may be used without any modular system:

script src pl-s">./mobile-console.min.js">script>

var mobileConsole = require('js-mobile-console');

define(['js-mobile-console'], function(mobileConsole))

mobileConsole.options( showOnError: true, proxyConsole: false, isCollapsed: true, catchErrors: true >);

if (condition)  mobileConsole.show(); > else  mobileConsole.hide(); >

mobileConsole.commands( 'check': 'var a = 10; a;', 'run': '10/5' >);

• show — show console with default options.
• hide — hide console.
• options — method to initialize console, by default will show console, accepts hash of options.
• commands — method to specify a hash of commands, which later can be executed within console.

• showOnError — Default false. Console will be hidden if no show method was called, but it will appear if any error occurs.
• proxyConsole — Default true. Determines if window.console methods are proxied to mobile console.
• isCollapsed — Default false. Determines if Console is collpased on startup.
• catchErrors — Default false. Determines if Console is registring window.onerror method in order to catch errors.

• add possibility to specify commands;
• add JSON.stringifying for logging;
• set z-index to console
• fix startup error on logValue

Feel free to open issues and send PRs.

Copyright (c) 2014-2018 Semenistyi Mykyta nikeiwe@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Console for debugging web apps right on mobile device

Источник

How to view javascript console on android (and ios)?

In web development, the JavaScript console is a tool used to log information, warnings, and error messages, as well as to interact with and test your code. The console is an essential tool for debugging and troubleshooting, and it is available in modern web browsers on desktop and laptop computers. However, if you’re using an Android or iOS device, you might not know how to access the JavaScript console. In this article, we will show you how to view the JavaScript console on your Android and iOS devices.

Method 1: Using the Chrome DevTools

1. Open Google Chrome on your Android (or iOS) device.
2. Navigate to the webpage where you want to view the JavaScript console.
3. Tap the three dots in the top right corner of the screen.
4. Select «Developer tools» from the drop-down menu.
5. Tap the «Console» tab to view the JavaScript console.

Example code

This will output «Hello World!» to the console.

var x = 5; var y = 10; console.log(x + y);

This will output the result of the addition of x and y (15) to the console.

Methods

• console.log() — outputs a message to the console.
• console.error() — outputs an error message to the console.
• console.warn() — outputs a warning message to the console.
• console.info() — outputs an informational message to the console.
• console.debug() — outputs a debug message to the console.
• console.clear() — clears the console.

Method 2: Using the Safari DevTools

To view the JavaScript console on iOS using Safari DevTools, follow these steps:

1. Connect your iOS device to your computer using a USB cable.
2. Open Safari on your computer and navigate to the website you want to debug on your iOS device.
3. Enable the Develop menu in Safari by going to Safari > Preferences > Advanced and checking the box next to «Show Develop menu in menu bar».
4. On your iOS device, open Safari and navigate to the same website you opened on your computer.
5. Tap the «Share» button in Safari on your iOS device and select «AirPlay» or «Screen Mirroring» to mirror your iOS device’s screen to your computer.
6. In Safari on your computer, click on «Develop» in the menu bar and select your iOS device from the list of available devices.
7. Open the Console tab in Safari DevTools to view the JavaScript console for your iOS device.

Here’s an example of logging a message to the JavaScript console using console.log() :

You can also use console.error() to log error messages:

console.error("Oops, something went wrong!");

And console.warn() to log warning messages:

console.warn("Warning: This action cannot be undone!");

These are just a few examples of the functions you can use in the JavaScript console. For more information, refer to the Safari DevTools documentation.

Method 3: Using a Third-Party App

To view the JavaScript console on Android (and iOS) using a third-party app, you can use the following steps:

1. Download and install a third-party app that supports JavaScript console, such as «Remote Debugging with Chrome» or «Weinre».
2. Ensure that your Android (or iOS) device is connected to the same network as your computer.
3. Open the app and follow the instructions to connect your device to the app.
4. Once connected, open your website or app in your device’s browser.
5. Use the app’s console feature to view the JavaScript console.

// Example code using "Remote Debugging with Chrome" app // Connect your device to the same network as your computer // Open the app and follow the instructions to connect your device to the app // Open your website or app in your device's browser // Use the app's console feature to view the JavaScript console console.log("Hello World!");

// Example code using "Weinre" app // Connect your device to the same network as your computer // Open the app and follow the instructions to connect your device to the app // Open your website or app in your device's browser // Use the app's console feature to view the JavaScript console console.log("Hello World!");

Note: Make sure to remove any console logs or debugging code before deploying your website or app to production.

Источник

JavaScript console and DevTools in mobile web app and PWA on Android and iOS

Desktop web browsers include powerful developer tools, that help inspect web apps, trace server requests, etc. But what if our web app works fine on a desktop, but starts acting weirdly on a real mobile device? What about Progressive Web Apps, where the browser is not even visible? Mobile Chrome, Firefox and Safari don’t have built-in DevTools — instead, the developer is expected to use remote debugging by connecting the mobile device to a PC via USB. Luckily there is a much simpler solution — a cross-browser javascript library painting a DevTools analogon right over the app in whatever browser you use.

The library is called Eruda and is freely available on GitHub under the MIT license. There are two main ways you can use it depending on how your app runs on a mobile device.

A DevTools-Bookmarklet for mobile browsers

To add DevTools to a mobile web app running in a mobile browser, add a bookmark to your browser with the following URL (make sure, the javascript: prefix is there as some browsers will remove it when pasting into the URL field):

javascript:(function () < var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () < eruda.init() > >)();

Now, all you need to do to open DevTools in a mobile browser is type the name of the bookmark in it’s address bar (I named it «DevTools» in the screenshot below). After pressing enter, you will see the Eruda-icon in the lower right corner of the browser floating above your app. Tap on it to launch the DevTools.

Launching Eruda mobile DevTools via bookmarkelt

Built-in DevTools for PWAs or kiosk mode

In case of progressive web apps (PWA) or if your app runs in kiosk mode (in a webview container), you won’t be able to use a bookmarklet as there is now browser address bar to call it from. In this case, you can add a hidden button to your app (i.e. only visible to admins or in a special debug mode), which will execute the JS function above. Another option is to add a special URL parameter (i.e. &devtools=1 ) and run the JavaScript code only if it is set. In any case, make sure to not load Eruda in regular user-mode because of it’s fairly large size.

Posted by Andrej Kabachnik

ERP product manager at SALT Solutions AG in Dresden, Germany

An exiting part of my job is experimenting with new technologies, designs and trends. In my blog I would like to share some experience in using modern web technologies for business applications.

Recent Posts

phpOLAPi — Connecting to OLAP databases from PHP

Making sap.m.StepInput accept empty values

onScan.js — hardware barcode and RFID scanners in web apps

• jQuery mobile (4)
• HowTo (9)
• JavaScript (13)
• jQuery (3)
• UI Frameworks (2)
• User Experience (3)
• enterprise mobile (2)
• barcodes (7)
• QR-codes (3)
• PWA (8)
• visualizing data (2)
• jQuery plugin (1)
• keyboard (1)
• HTML5 (2)
• camera (3)
• PHP (5)
• Symfony Components (2)
• Browser (1)
• OLAP (2)
• SQL (1)
• Fiori (3)
• SAP (7)
• OpenUI5 (8)
• Offline First (3)
• ServiceWorker (1)
• Web Services (4)
• REST (2)
• JSON:API (2)
• OData (2)
• GraphQL (2)
• PartiQL (2)
• SOAP (1)
• JSON-RPC (1)
• gRPC (1)
• Email (1)
• Tools (1)
• Lifehacks (1)
• RFID (2)
• UI5 controls (1)

Источник