Tools | calepin

Last updated 7 months ago

Was this helpful?

Debug

- node --inspect index.js then open the provieded URL (start with chrome-devtools://)

Debug webpage on remote iOS Safari

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

At least works with iOS 11.4:

connect iOS device with a cable
install iTunes, because usbmuxd can't configure correcly USB devices on Windows:
start iTunes and allow paring (iTunes show an alert)
"trust this computer" (iOS show an alert). See
install ios-webkit-debug-proxy (win64 release comes with libimobiledevice)
allow Web Inpsector on iOS: Settings > Safari > Advanced > Web Inspector = ON
start ios_webkit_debug_proxy.exe
open chrome://inspect/#devices in Chrome

Install a Fiddler proxy certificate:

go to http://ipv4.fiddler:8888/ (update the right port Fiddler use) and click FiddlerRoot certificate and install
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

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."
enable USB Debugging on the smartphone
.\platform-tools\adb devices
if needed, install USB drivers
open chrome://inspect/ with Chrome (or in DevTools > Menu "Customize and Control DevTools" > More Tools > Remove devices)

Android Emulator:

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);}});

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/
https://speakerdeck.com/addyosmani/automating-front-end-workflow
http://www.nofluffjuststuff.com/blog/eric_wendelin/2011/08/continuous_integration_for_javascript

NPM

npm shrinkwrap && shrinkpack

npm install someModule --ignore-scripts

https://www.npmjs.com/package/shrinkpack

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
https://stackoverflow.com/questions/11524481/minify-css-and-javascripts-files-before-packing-into-zip-using-cmake

Build with `make`

https://algorithms.rdio.com/post/make/
http://www.vittoriozaccaria.net/wmake/#make https://github.com/vzaccaria/make4web/blob/master/makefile.mk
https://stackoverflow.com/questions/8385359/compile-all-less-file-using-a-makefile
http://blog.yjl.im/2013/03/using-makefile-to-minify-and-switch.html
http://blogs.mpr.org/developer/2014/02/makefile/
http://nefariousdesigns.co.uk/website-builds-using-make.html
http://en.wikipedia.org/wiki/Make_(software)
https://stackoverflow.com/questions/1079832/how-can-i-configure-my-makefile-for-debug-and-release-builds

Examples:

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

http://superuser.com/questions/181517/how-to-execute-a-command-whenever-a-file-changes
https://stackoverflow.com/questions/1515730/is-there-a-command-like-watch-or-inotifywait-on-the-mac
http://andries.filmer.nl/kb/Monitoring-file-system-events-with-inotify,-incron-and-authctl/129

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:

Loader rule/condition: resourceQuery (match the resource query string), issuer (parent resource)

Other:

Puppeteer

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

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

Last updated 7 months ago

Was this helpful?

Debug

Debug webpage on remote iOS Safari

Debug webpage on remote Android device

Debug cookie written by JS

Console

Tools & Workflow

Tasks

NPM

Transcode

Package

Package with ninja

Build with cmake

Build with make

Steps ./configure && make && make install

When files changes

Filename with spaces

Dependencies

Others

Java

Google Closure Compiler

Nailgun

Bundling

Webpack

Puppeteer

Update DOM objects

Get page metrics

Get cookies

Listen page events

Extending tools

Extending ESLint

Extending Prettier

Extending Babel

Extending webpack

Debug

Debug webpage on remote iOS Safari

Debug webpage on remote Android device

Debug cookie written by JS

Console

Tools & Workflow

Tasks

NPM

Transcode

Package

Package with ninja

Build with cmake

Build with make

Steps ./configure && make && make install

When files changes

Filename with spaces

Dependencies

Others

Java

Google Closure Compiler

Nailgun

Bundling

Webpack

Puppeteer

Update DOM objects

Get page metrics

Get cookies

Listen page events

Extending tools

Extending ESLint

Extending Prettier

Extending Babel

Extending webpack

Package with `ninja`

Build with `cmake`

Build with `make`

Steps `./configure && make && make install`

Package with `ninja`

Build with `cmake`

Build with `make`

Steps `./configure && make && make install`