Tools

Debug

Debug webpage on remote iOS Safari

Only for Safari, or webview in application developper version only (installed via XCode or App for iOS simulator)

At least works with iOS 11.4:

  1. connect iOS device with a cable

  2. install iTunes, because usbmuxd can't configure correcly USB devices on Windows: ios - Why are Windows binaries of libimobiledevice dependent on iTunes? - Stack Overflow

  3. start iTunes and allow paring (iTunes show an alert)

  4. "trust this computer" (iOS show an alert). See Apple Support page

  5. install ios-webkit-debug-proxy (win64 release comes with libimobiledevice) Releases · google/ios-webkit-debug-proxy

  6. allow Web Inpsector on iOS: Settings > Safari > Advanced > Web Inspector = ON

  7. start ios_webkit_debug_proxy.exe

  8. open chrome://inspect/#devices in Chrome

Install a Fiddler proxy certificate:

  1. Configure Fiddler for iOS | Progress Telerik Fiddler

  2. go to http://ipv4.fiddler:8888/ (update the right port Fiddler use) and click FiddlerRoot certificate and install

  3. Important Settings > General > About > Certificate Trust Settings and trust the installed root certificate (for the option : Fiddler > Tools > Options... > HTTPS > Capture HTTPS CONNECTs > Decrypt HTTPS traffic)

Debug webpage on remote Android device

  1. install Android SDK (could be command line tools only). Exemple in %PROGRAMFILES(X86)%\Google\Android SDK

  2. install plaform tools .\tools\bin\sdkmanager.bat "platform-tools". Note: if you install in "Program Files" folder, you need adminstrative rights to execute this commande, overwise you will get an error "Failed to read or create install properties file" or "Warning: File C:\Users\XXXXX.android\repositories.cfg could not be loaded."

  3. enable USB Debugging on the smartphone

  4. .\platform-tools\adb devices

  5. if needed, install USB drivers

  6. open chrome://inspect/ with Chrome (or in DevTools > Menu "Customize and Control DevTools" > More Tools > Remove devices)

Android Emulator:

Debug cookie written by JS

Add a debugger breakpoint when a cookie is written.

const desc = Object.getOwnPropertyDescriptor(Document.prototype, "cookie");// Object.getPrototypeOf(Object.getPrototypeOf(document);
Object.defineProperty(document, "cookie", {...desc, set(...args) {debugger;return desc.set.apply(this, args);}});

See also

Console

Tools & Workflow

Export, Packing, Application packer (simple app/site vs. complexe app/site)

Tasks

  • generate output: HTML, CSS, JS, JSON, Image

  • include/inject

  • loose bits:

    • minification (optimize/reduce without require reverse operation)

      • use progressive images

      • remove unessary data (duplicates, unused), tags, selectors

  • compact/compress (require processing to recover operable state): pre-gzip

  • http://incident57.com/codekit/

  • http://hammerformac.com/

  • http://alphapixels.com/prepros/

  • http://yeoman.io/

  • Grunt

  • https://speakerdeck.com/addyosmani/automating-front-end-workflow

  • Package Webproject with make

  • http://www.nofluffjuststuff.com/blog/eric_wendelin/2011/08/continuous_integration_for_javascript

NPM

npm shrinkwrap && shrinkpack

npm install someModule --ignore-scripts

Transcode

Package

  • https://github.com/rollup/rollup

Package with ninja

Build with cmake

  • https://github.com/kogmbh/ViewerJS/blob/master/CMakeLists.txt

  • https://github.com/markand/cmake-modules/blob/master/FindNode.cmake

  • https://github.com/kogmbh/WebODF/blob/master/webodf/CMakeLists.txt

  • The Kitware Blog - CMake: building with all your cores

  • https://stackoverflow.com/questions/11524481/minify-css-and-javascripts-files-before-packing-into-zip-using-cmake

Build with make

Examples:

  • Makefile

  • https://github.com/es-shims/es-shim-api/blob/master/Makefile

  • https://github.com/const-io/numeric-constants/blob/master/Makefile

# scripts and map
scripts.js scripts.js.map: js-and-map
# And
js-and-map: scripts.js
   touch scripts.js
   touch scripts.js.map

.INTERMEDIATE: js-and-map

Few notes:

Use make

Pro

  • c'est une roue, pas besoin qu'elle soit réinventée

  • n'intègre pas de package manager, quelques doit l'outils certain dépendances / outils (imagemagick, PHP, python, ruby, etc.) nécessitent d'être installés séparément (à la main ou via des package manager comme port, apt-get, composer, npm, gem, etc.)

  • can be multicore task (use the parameter -j)

Cons

  • can't handle space in paths

  • http://www.conifersystems.com/whitepapers/gnu-make/

  • plusieurs versions existent

  • plutôt UNIX

Escape some chars:

VAR="Hello $USER! This symbole '#' is a hash."

Must be escaped as:

VAR="Hello $$USER! This symbole '\#' is a hash"

To not be considered as a comment

Steps ./configure && make && make install

./configure

tells you whether are quite ready to build the application. It will check if you have everything needed to build the application, and, if it sees any critical errors it will inform you.

make

builds (compiles) the source code. Compiler compiles the code, but, most of the times, the code cannot stand alone, it requires external libraries (usually provided by ubuntu packages) to be installed. After this step the executable(s) of this specific application you are trying to install will be created.

sudo make install

moves all the needed for the application files to the appropriate system directories. This has to be done after make because the executables of the application have been created and can be moved to the appropriate system directory (e.g. /usr/bin/) for later use.

Libraries are necessary, because they allow a programmer to use code made by other people to achieve certain things. i.e. if I wanted to do some disk formatting in my program, I could use the libs someone already wrote to do the formatting, and I just have to make my program call those libraries. If that person finds an issue in their library, they can fix it, and it will fix it in my program too. This is how open-source software can be written so fast and be so stable.

http://askubuntu.com/questions/173088/what-does-configure-make-make-install-do

When files changes

Continuous integration

Bash script

#!/bin/sh
while true ; do make ; sleep 1 ; done

watch command

watch make
watch -n 0.5 "make 2>&1"

watchman

https://github.com/facebook/watchman

brew install watchman
sudo port install watchman

fswatch

https://github.com/alandipert/fswatch

brew install fswatch
cd /tmp && git clone https://github.com/alandipert/fswatch && cd fswatch/ && make && cp fswatch /usr/local/bin/fswatch

inotifywait

Via inotify-tools package

Only available on LINUX

  • http://liquidat.wordpress.com/2013/11/14/howto-acting-on-inotify-events-in-a-shell-with-inotifywait/

  • http://blog.lagentz.com/general/automate-your-shell-scripts-using-inotify-and-inotifywait/

  • https://stackoverflow.com/questions/18289449/how-to-get-recursive-directory-path-using-inotify-tools-in-terminal

  • https://stackoverflow.com/questions/tagged/inotify-tools

  • http://xaroumenosloukoumas.wordpress.com/2011/01/28/watching-directories-for-file-changes-with-inotifywait/

Filename with spaces

Make generaly don't handle filename with space (spaces used as separators)

  • Use quotes when it's possible

  • touch $(subst \,\\,$@)

  • http://www.cmcrossroads.com/article/gnu-make-meets-file-names-spaces-them?page=0%2C2

  • https://stackoverflow.com/questions/9838384/can-gnu-make-handle-filenames-with-spaces

Dependencies

Others

  • https://github.com/ai/autoprefixer/tree/master/lib/hacks

  • http://www.phpied.com/diy-source-maps/

  • http://www.phpied.com/css-diff/

Java

http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html#javasejdk

Google Closure Compiler

/usr/share/java/closure-compiler.jar

Externs:

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @js_externs window.sas = {}
// @js_externs window.sas.setup = function(config){config.networkid;config.domain}
// ==/ClosureCompiler==
window.sas;
sas.setup({networkid: 0, domain: 0})

git && ant

#!/bin/bash
mkdir closure-compiler
cd closure-compiler
git clone https://github.com/google/closure-compiler.git .
ant jar
sudo cp -f ./build/compiler.jar /opt/local/share/java/closure-compiler.jar
cd ..
rm -rf closure-compiler

Download

#!/bin/bash
wget -qO- -O compiler-latest.zip http://dl.google.com/closure-compiler/compiler-latest.zip
unzip compiler-latest.zip -d compiler-latest
cp -f compiler-latest/compiler.jar /opt/local/share/java/closure-compiler.jar
rm -rf compiler-latest

https://github.com/google/closure-compiler http://dl.google.com/closure-compiler/compiler-latest.zip

Homebrew https://github.com/Homebrew/homebrew/blob/master/Library/Formula/closure-compiler.rb https://groups.google.com/forum/#!topic/brew-test-bot/OiQ3aliyUkw https://github.com/gmarty/grunt-closure-compiler/issues/2

Debian https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=705565 https://packages.debian.org/source/sid/closure-compiler

Nailgun

Nailgun (for java) http://www.martiansoftware.com/nailgun/ https://github.com/Homebrew/homebrew/issues/21880 https://github.com/sethp-jive/homebrew/blob/0f0a86819d8f5bd53251f263a26ae8119f88dc20/Library/Formula/nailgun.rb

#!/bin/bash
# Server (java)
sudo wget -qO- -O /opt/local/share/java/nailgun.jar http://central.maven.org/maven2/com/martiansoftware/nailgun-server/0.9.1/nailgun-server-0.9.1.jar
# Client (c)
mkdir nailgun-client
cd nailgun-client
git clone https://github.com/martylamb/nailgun.git .
# Will install ng in /usr/local/bin/ng
sudo make install
cd ..
rm -rf nailgun-client

Exist as a variant of jruby: https://trac.macports.org/ticket/20552

Bundling

Webpack

Webpack use enhanced-resolve

Import a file that is not in the filesystem:

Loaders:

Other:

Puppeteer

See also playwright

Update DOM objects

page.evaluateOnNewDocument(() => {
	// Return fake languages preferences
	Object.defineProperty(navigator, "languages", {
	  get: function() {
		return ["en-US", "en", "bn"];
	  }
	});
});
page.evaluateOnNewDocument(() => {
	// Return fake list of plugins
	const mimetype = Object.create(MimeType.prototype, {
		description: {value: "Portable Document Format"},
		suffixes: {value: "pdf"},
		type: {value: "application/x-google-chrome-pdf"},
	});
	const plugin = Object.create(Plugin.prototype, {
		description: {value: "Portable Document Format"},
		filename: {value: "internal-pdf-viewer"},
		length: {value: 1},
		name: {value: "Chrome PDF Plugin"},
		[mimetype.type]: {value: mimetype},
		0: {value: mimetype},
	});
	Object.defineProperty(mimetype, "enabledPlugin", {value: plugin});

	const pluginsArray = Object.create(PluginArray.prototype, {
		0: {value: plugin},
		[plugin.name]: {value: plugin},
		length: {value: 1},
	});

	// Fix item/namedItem listing
	for(const [{prototype}, type] of [[PluginArray, Plugin], [Plugin, MimeType]]){
		Object.defineProperties(prototype, {
			item: {value: function item(index){
				index = parseInt(index);
				return !isNaN(index) && this[index] instanceof type ? this[index] : null;
			}},
			namedItem: {value: function namedItem(name){
				return this[name] instanceof type ? this[name] : null;
			}},
		});
	}

	// TODO:
	// - implement iterator protocol on plugin array
	// - set correctly object properties descriptions (enumerable, configurable)
	// - set correctly function toString() -> "function namedItem() { [native code] }"
	Object.defineProperty(navigator, "plugins", {
		configurable: true,
		enumerable: true,
		get: function plugins() {
			return pluginsArray;
		}
	});
});

Get page metrics

await page.goto(url, {waitUntil: 'load'});
const performance = JSON.parse(await page.evaluate(() => performance.toJSON()));
await this._client.send('Performance.enable');
const metrics = await page._client.send('Performance.getMetrics');

Get cookies

Get only first party cookies (see https://stackoverflow.com/questions/50252943/puppeteer-get-3rd-party-cookies):

const cookies = await page.cookies();// gives only first party cookies

To get all (first and third) parties cookies, we need to use Dev Tools protocol (low level)

const {cookies} = await page._client.send('Network.getAllCookies');

Listen page events

Use an exposed function (Page.exposeFunction())

Extending tools

Extending ESLint

Aka write a plugin for ESLint

Extending Prettier

Aka write a plugin for Prettier

TODO

Extending Babel

Aka write a plugin for Babel

TODO

Extending webpack

Aka write a plugin for webpack, write a loader for webpack

PreviousNetworkNextWeb

Last updated

Was this helpful?