How to use mobile web developer tools

Google mobile browser in the developer tools where

1, open chrome browser, and then open

developer tools (press F12, or right mouse click – & gt; review elements

can also be opened),

2, this is the legend of the developer tools, view the dom structure

3, the view of the resource (coookie, html5 local database, etc.)

4, simulate the cell phone environment, very useful for mobile developers

WeChat web developer tool ios how to use?

WeChat web developer tools main features:

Use your own micro-signal to debug WeChat web authorization;

Debugging, checking the page’s JS-SDK-related functions and permissions, simulating the inputs and outputs of most SDKs;

Use of the mobile debugging function based on weinre;

Use of the integrated ChromeDevTools to assist with development.

The top menu bar of the tool is a unified entry point for actions such as refresh, back, and checking the address bar, as well as an analog settings page for the client version of WeChat. On the left side is WeChat’s webview simulator, which allows you to directly manipulate the web

page to simulate real user behavior. On the top right side is the address bar for entering the link to the page to be debugged, as well as a clear cache button. On the bottom right is the associated request and return results, as well as the debug screen and login button.

I want to use the cell phone to test the web page I wrote, how to do

First, IOS mobile (Safari developer tools)

Mobile: Settings → Safari → Advanced → Web Inspector → On.

mac: Safari → Preferences → Advanced → in the menu bar to show the “Development” menu.

After launching Safari on OSX, you can access the iOS device with a USB cable and launch Safari on the mobile device. Click “Development” in the Safari menu on your computer, and you will see the name of the iOS device displayed, and its sub-menu items are all the tabs of Safari on the mobile device. Safari on the device all the tabs, click on any one to start debugging.

Convenient, simple, can also debug the shell wrapped browser such as WeChat.

Note: By the way, to debug different versions of ios, you can enter the xcode to download different system packages (of course, in the absence of equipment, the tycoon skipped)

Second, Android mobile

1, chrome debugging method

First, make sure that the phone and the PC are equipped with the latest version of chrome. Browser, the second is to open the developer options of the phone and allow debugging, and then the data cable to connect the two devices. Open chorme on your PC, type chrome://inspect, then open chrome on your phone, then your phone will pop up a box asking if you want to allow debugging, of course, OK. Sometimes the phone lock screen will disconnect, please unplug the usb and start again.

Click inspect to open DevTools, you can select the DOM elements in the page, and at the same time, the corresponding elements in the device are also highlighted, you can also use DevTools InspectElement to select the target element, you can real-time interaction with the mobile device page, it is convenient to locate where the problem is, code debugging, you can be like the pc terminal. and you can play as happily as on the pc side. If you have problems, please check the chrome version.

Author: tomato loving fish

Link: http://www.hu.com/question/37361845/answer/71674280

Source: Zhihu

Copyright reserved. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please cite the source.

Chrome’s debugging can generally only debug chrome pages, but its official documentation says it can also debug WebViews:

“Onyourcomputer,thechrome:// inspectpagedisplayseveryconnecteddevice,alongwithitsopentabsanddebug-enabledWebViews.”

It should be noted that debugging WebViews requires an Android version of Android4.4+, and then need to configure the corresponding code within your APP, call the static method setWebContentsDebuggingEnabled in the WebView class as follows:

if(Build.VERSION.SDK_INT>=Build.VERSION. _CODES.KITKAT){

WebView.setWebContentsDebuggingEnabled(true);

}

The above configuration method applies to all WebView scenarios within an Android app.

Whether the Android WebView is debuggable or not doesn’t depend on the flag variable debuggable in the manifest of the app. If you want to allow WebView remote debugging only when debuggable is true, use the following snippet:

if(Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT){

if(0!=(getApplicationInfo().flags&=ApplicationInfo.FLAG_DEBUGGABLE{

WebView. setWebContentsDebuggingEnabled(true);

}

}

I’ve only written a rough idea here, if you have any other questions or would like to see the detailed documentation, look at the following link (bring your own ladder):

https://developer.chrome .com/devtools/docs/remote-debugging

Note: The same way you can install a virtual machine for Android on your computer, we recommend Genymotion, same thing, you want to test any version, just get your own roms, but of course, I didn’t say anything about the tycoon.

2, UC Developer Browser

Since we do not recommend the use of mobile UC (we should consciously boycott the mobile tumor), so I will only briefly, if it is in the interested, please see for yourself: Developer Center _ UC UV ︱ UC Browser ︱ the world’s number one cell phone browser, with more than 500 million users ︱ Mobile Browser

It’s debugging methods Not much difference with chrome.

3, the use of Weinre debugging

The method is an older method, for other debugging methods belong to the slash-and-burn type. weinre is a debugging package, which itself provides a JavaScript, you need to add the js in the project file. first of all, install Weinre, we use nodejs to install it, use the

This way when you visit the page and load this JS, it will be listened to by Weinre for control.

Tip: The #anonymous at the end of this JS serves as an identifier, so to distinguish it, we can change it to #test and put it on the page. At this point, the address of our Inspect panel is not http://172.16.0.2:8080/client/#anonymous了, but http://172.16.0.2:8080/client/#test.

When we visit the page, it will appear in the list of listeners , and if there is more than one page, you can select one from the list. Then you can use the Elements, Console and other panels behind to debug the operation:

Weinre is very flexible, just load this JS in the page, and then access it, so WebView can be debugged in this way, and some lower versions of Android, iOS can also be supported, WindowPhone is also available. When debugging a mobile device you may need to set up a local server with a LAN IP, connect the device to the local network as a LAN, and then access the web page with the mobile device.

Weinre isn’t the end-all-be-all, and compared to Chrome’s debugging tools, it lacks JavaScriptdebug and Profiles, but it’s compatible enough for basic debugging.

4, mihtool test

MIHTool is a national development, based on Weinre, for iOS devices, front-end development testing.

Weinre debugging with roughly the same way, that is, open a server, and then insert JS into the page, access for debugging.

MIHTool simplifies this process by being an app that can be installed directly onto your iOS device, and then has a simple built-in browser that opens your test page, and when it opens, it automatically inserts Weinre’s JS into the page and tells you the Weinre console URL and other information that you can access for debugging.

It also provides a public Weinre debugging service that generates links like MIHToolWebInspector, which can be opened for debugging, which is very convenient, just a little bit stuck.

5, mobile devices online testing

Mobile devices are so many, small companies or teams, there is not so much money and energy to buy so much test equipment for testing. So someone buys these devices, connects them, and provides online debugging services.

Generally it’s just his real cell phone device turned on and then screenshotted out for preview.

For example: BrowserStack, etc., but of course it’s generally more stuck.

Three, summed up

Debugging methods are many, endless, the key is to see if they are smooth and skillful, the key is to complete the development task on time and in accordance with the amount.

The key is to usually accumulate more cross-pit posture, write a little less incompatible code, debugging is a little more comfortable.

Mobile front-end development debugging: http://yujiangshui.com/multidevice-frontend-debug/

Mobile development real machine debugging: mobile development real machine debugging

remote_inspect_web_on_real_ device: jieyou/remote_inspect_web_on_real_device-GitHub

remote-debugging: https://developer.chrome.com/devtools/docs/remote- debugging

Mobile web development debugging of Chrome remote debugging (RemoteDebugging): mobile web development debugging of Chrome remote debugging (RemoteDebugging)

– ———- 2015/12/2 Supplemental BrowserSync section ——– —–

Many of my friends say again why not Browser-sync, and those who give bad reviews, let’s be honest, I didn’t know that stuff before. Spent some time looking around and found their official website: Browsersync-Time-savingsynchronizedbrowsertesting thought it was kinda interesting haha.

Then I used it, and I think it’s okay, it will really save a lot of work, and it’s fast to get started, almost 5 minutes to get started quickly, and the front-end wheels are like that.

1, first install BrowserSync

npminstall-gbrowser-sync

2, start BrowserSync, the principle should be the kind of detection of changes in the file, and then in the server-side websocket notification of changes in the browser, and then load the new changes in the file, in the not support the websocket browser on the rotation of the server-side changes in the loading of new files. I just simply grabbed a packet and looked at it, and I don’t know if I got it right.233

There are two scenarios at this point, one is static:

//Listening to css files

browser-syncstart–server –files “css/*.css”

//Listening to css and html files

browser-syncstart-server–files “css/*.css,*.html”

Two are dynamic:

// Hostname can be either ip or domain name

browser-syncstart–proxy” hostname” “css/*.css”

And then it’s on ah, it’s that simple.

There’s also gulp to go along with it. Specifically look at the document: Browsersync + Gulp.js

Summary, the front-end changes rapidly, a month does not learn, feel behind ah

—- ———- — I’m the dividing line —— ———

Here is @ Yu Jiangshui God’s original text, the reason why I circled him a bit, because I have this document pasted a lot from him, this is his original text: –> mobile front-end development debugging.

This is what I have organized, each of which I have actually implemented, and I have also added a bit of information I found on the debugging part of the Android webview –> Mobile front-end development debugging strategy on the real machine!

How to save images with developer tools

Methods to save Behance images

In addition to the use of auxiliary tools such as petals or the site’s method, here provides a majority of the site’s available methods to save the image: press F12 to bring up the developer mode to extract the source address of the image, and then save it.

01. Log in to the website

02. Bring up the F12 developer panel, and then use the selection tool to click on the corresponding picture

The selection button in the developer tool, which varies from browser to browser

03. Find the source URL of the picture

After you have selected the picture, there will be a corresponding code segment in the panel of the developer tool. to find that code, and then click on the small triangle to expand to view, see the suffix is the image format, usually .jpg or .gif, png and so on a section of the URL, behance will provide a number of sizes of images, move the mouse to the highest resolution of that section of the URL, the right button —- select Openinthenewtab (open in a new window) command

< p>04: in a new window to open the picture will be able to directly right-click Save As. Some students who are not clear about the code, just try a few more times on those URLs until you find that maximum resolution picture.